The opacity property sets the opacity level for an element, opacity allows to change the transparency of an element.
- Syntax:<style> #dv { background-color:#babafe; width:200px; height:100px; opacity:0.4; } </style> <h4>Example opacity 40%</h4> <div id='dv'>Some content ...</div>
<style> #im { opacity:0.5; } </style> <h4>Example opacity 50% on image</h4> <img src='css/html_course.jpg' alt='HTML and CSS Course' width='155' height='160' id='im' />
<style> #im2 { opacity:0.5; } #im2:hover { opacity:1; } </style> <h4>Example changing transparency on hover</h4> <p>Place the mouse over the image below.</p> <img src='css/html_course.jpg' alt='HTML and CSS Course' width='155' height='160' id='im2' />
<style> #trans { display:none; position:absolute; top:2%; left:2%; width:96%; height:95%; background-color:#07fe08; opacity:0.5; } #cnt { position:relative; background:#e7e8fe; width:300px; height:200px; border:1px solid blue; padding:20px; } #cnt:hover #trans { display:block; } </style> <h4>Example content hovered with transparency element on hover</h4> <div id='cnt'> <div id='trans'></div> Place the mouse over this box to see the opacity effect. <img src='css/css3.jpg' alt='CSS3 opacity' width='160' height='98' /> </div>
<p>Web development courses: <em>CoursesWeb.net</em></p>
h3 { padding: 2px 0.2em; }
// gets first Div with class="cls", and shows its content var elm = document.querySelector("div.cls"); alert(elm.innerHTML);
if(isset($_POST["field"])) { echo $_POST["field"]; }