HTML CSS examples for CSS Widget:Image Text
Working with z-index and opacity for Image and Text layout
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #images {<!-- w w w. ja v a2 s . com--> position:relative; height:100px; width:134px; text-align:center; border-color:Chartreuse; border-style:solid; } .images { height:100%; -o-transition:opacity 0.6s; -moz-transition:opacity 0.6s; -webkit-transition:opacity 0.6s; transition:opacity 0.6s; } .hidden { z-index:-2; position:absolute; top:0; } .images:hover { opacity:0; } </style> </head> <body> <div id="images"> <img alt="first" id="1" class="images" src="https://www.java2s.com/style/demo/InternetExplorer.png"> <div class="hidden"> Lorem i </div> </div> </body> </html>