HTML CSS examples for CSS Widget:Hover
Hover to slide up and change opacity
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w . j av a 2 s.co m--> width:961px; } #page-wrap { width:621px; margin:0 auto; } .slide-up-boxes a { display:block; width:301px; height:301px; background:Chartreuse; border:2px solid yellow; overflow:hidden; } .slide-up-boxes h5 { height:301px; width:301px; text-align:center; line-height:151px; -webkit-transition:margin-top 0.4s linear; background-color:blue; } .slide-up-boxes a:hover h5 { margin-top:-301px; } .slide-up-boxes div { text-align:center; height:301px; width:301px; opacity:0; background-color:pink; -webkit-transform:rotate(7deg); -webkit-transition:all 0.3s linear; } .slide-up-boxes a:hover div { -webkit-transform:rotate(0); opacity:2; } .slide-up-boxes { margin:6px; width:301px; float:left; } </style> </head> <body> <div id="page-wrap"> <section class="slide-up-boxes"> <a href="www.reddit.com"> <img src="https://www.java2s.com/style/demo/Firefox.png"> <div> <h5> <img src="https://www.java2s.com/style/demo/Safari.png"> </h5> </div> </a> </section> <section class="slide-up-boxes"> <a href="www.reddit.com"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> <div> <h5> <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> </h5> </div> </a> </section> <section class="slide-up-boxes"> <a href="www.reddit.com"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> <div> <h5> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> </h5> </div> </a> </section> <section class="slide-up-boxes"> <a href="www.reddit.com"> <img src="https://www.java2s.com/style/demo/Opera.png"> <div> <h5> <img src="https://www.java2s.com/style/demo/Safari.png"> </h5> </div> </a> </section> <div style="clear:both;"></div> </div> </body> </html>