HTML CSS examples for CSS Widget:Image Text
Show text besides the icon image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul.nav {<!-- w w w. j a v a 2s.c o m--> list-style:none; margin:21px 0px 0px; padding:0px; } .button { width:26%; height:41px; float:left; background-color:Chartreuse; opacity:0.76; } .button p { font-size:16px; margin:13px; display:inline-block; float:left; visibility:hidden; } .button img { width:41px; float:left; } .button:hover p { visibility:visible; } </style> </head> <body> <input type="date">Lorem <input type="number">Lore <input type="number">Lorem <ul class="nav"> <li id="add" class="button"> <img src="https://www.java2s.com/style/demo/Opera.png"> <p>Lor</p> </li> <li id="show" class="button"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" title="see"> <p>Lore</p> </li> <li id="showAll" class="button"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> <p>Lorem ip</p> </li> <li id="delete" class="button"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> <p>Lorem ips</p> </li> </ul> </body> </html>