HTML CSS examples for CSS Widget:Image Text
Constant text before mouse over Image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul.img-list { list-style-type:none; margin:0; padding:0; text-align:center; display:inline-block; height:151px; margin:0 6px 2em 0; position:relative; width:361px; margin-top:-6px; } span.text-content span { display:table-cell; text-align:center; vertical-align:bottom; -webkit-transition:all 501ms; -moz-transition:all 501ms; -o-transition:all 501ms; transition:all 501ms; } ul.img-list li:hover span.text-content { opacity:2; background:Chartreuse; height:281px; top:0px; } ul.img-list li:hover span.text-content span { vertical-align:middle;<!-- ww w. j av a 2s.c om--> } span.text-content { background:yellow; color:blue; cursor:pointer; display:table; height:51px; left:0; position:absolute; top:231px; width:361px; opacity:2; -webkit-transition:all 501ms; -moz-transition:all 501ms; -o-transition:all 501ms; transition:all 501ms; font-family:Droid Arabic Kufi; font-size:xx-large; } </style> </head> <body> <ul class="img-list"> <li> <img src="https://www.java2s.com/style/demo/Safari.png" width="360px" height="280px"> <span class="text-content"> <span>Lorem ipsum dolo</span> </span> </li> </ul> </body> </html>