HTML CSS examples for CSS Widget:Hover to Show
Showing content on hover
<html> <head> <title>Lorem ipsum dolor sit amet, conse</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #menuimg {<!-- w ww . j a v a 2 s .c o m--> position:absolute; width:51px; height:51px; left:0; right:0; margin-left:auto; margin-right:auto; top:51px; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; transition:all .6s; background-color:Chartreuse; } .menu { position:fixed; height:100%; width:151px; left:0; background:yellow; -webkit-box-shadow:4px 0px 6px 0px blue; -moz-box-shadow:4px 0px 6px 0px pink; box-shadow:4px 0px 6px 0px OrangeRed; transition:all .6s; } .menu:hover { height:100%; width:226px; } span { position:relative; display:none; } #menuimg:hover~span { display:inline; } span:hover { display:inline; } </style> </head> <body> <div class="menu"> <div id="menuimg"></div> <span> <ul> <li>Lorem ipsu</li> <li>Lorem </li> <li>Lorem ip</li> </ul> </span> <div id="logo"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" height="100px" width="100px"> </div> </div> </body> </html>