HTML CSS examples for CSS Widget:Image
Display image caption with overflow
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> figure {<!-- w ww. j a v a2 s.c o m--> position:relative; overflow:hidden; height:auto; } figcaption { width:100%; padding:11px 0; color:Chartreuse; background:yellow; } figcaption h2 { margin:0 0 26px 0; } figcaption { overflow:hidden; position:absolute; bottom:0; background:blue; -webkit-transition:all .6s ease; -moz-transition:all .6s ease; -o-transition:all .6s ease; -ms-transition:all .6s ease; transition:all .6s ease; } figcaption p { display:none; } figcaption h2, figcaption .title span { text-transform:uppercase; } figcaption:hover p { display:block; } figcaption:hover { bottom:0; height:auto; } .item { width:501px; height:auto; } figcaption .title { overflow:auto; height:100px; } </style> </head> <body> <div class="item"> <figure> <img class="img-responsive" src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Image"> <figcaption> <div class="title"> <span>lorem ipsum</span> <h2>blog title</h2> <h2>blog title</h2> <h2>blog title</h2> <h2>blog title</h2> <h2>blog title</h2> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p> </figcaption> </figure> </div> </body> </html>