HTML CSS examples for CSS Widget:Hover to change
Hover to change element position
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!--from w ww .j a v a2s . c o m--> margin:0; padding:0; } html,body { height:100%; } .wrap { display:-webkit-flex; display:-ms-flex; display:-moz-flex; display:flex; width:100%; height:100%; list-style-type:none; text-align:center; white-space:nowrap; overflow:hidden; } .con { position:relative; box-sizing:border-box; -webkit-flex:2 .6; -ms-flex:2 .6; -moz-flex:2 .6; flex:2 .6; position:relative; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; opacity:0.6; transition:all 0.6s linear; margin:0px; border-left:2px solid Chartreuse; } .hover { display:inline-block; box-sizing:border-box; position:absolute; top:0; right:0; bottom:0; left:0; z-index:3; text-align:center; color:yellow; background-color:blue; transition:0.6s; } .con:hover { -webkit-flex-grow:2.6; -ms-flex-grow:2.6; -moz-flex-grow:2.6; flex-grow:2.6; text-align:center; color:pink; opacity:11; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; margin:0px; } .con:hover span { text-align:center; color:OrangeRed; opacity:0; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; margin:0px; } </style> </head> <body> <ul class="wrap"> <li class="con"> <span class="hover">Lorem ip</span> </li> <li class="con"> <span class="hover">Lorem ip</span> </li> <li class="con"> <span class="hover">Lorem ip</span> </li> <ul> </ul> </ul> </body> </html>