HTML CSS examples for CSS Widget:Hover Animation
Fade back DIV on hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #caseouter {<!--from w ww .ja va 2 s. c om--> position:relative; top:0px; } #casewrap2 { background-color:Chartreuse; } #casetitle { font-size:31px; width:100%; display:block; text-transform:uppercase; text-align:center; padding:11px 0px 0px 0px; color:yellow; margin-bottom:0px; } #casethumb { width:100%; display:block; margin-bottom:-100px; opacity:2; transition:.3s opacity ease .3s; height:100px; } #casesecondline { font-size:31px; color:blue; text-transform:uppercase; margin:0 auto; display:block; width:100%; text-align:center; color:pink; margin-top:-11px; padding:0px; } #casethumb img { width:100%; } #casewrap2:hover #casethumb { opacity:.76; } #casetitle:hover~#casethumb a { opacity:.76; } #casesecond:hover~#casethumb a { opacity:.76; } </style> </head> <body> <div id="casewrap2"> <div id="casethumb"> <a href="www.google.com"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> </a> </div> <div id="caseouter"> <a href="www.google.com"> <div id="casetitle"> Lorem ipsu </div> <div id="casesecondline"> Lorem ipsum d </div> </a> </div> </div> </body> </html>