HTML CSS examples for CSS Widget:Image Caption
Create image caption layout
<html lang="en"> <head> <style> .dest-item{<!-- w w w . java 2 s . c o m--> position:relative; overflow:hidden; z-index:1; padding:0px; width: 500px; } .dest-item img{ width: 100%; } .dest-caption{ position: absolute; top: 0px; background: rgba(0,0,0,0.5); z-index: 2; width: 100%; height: 100%; box-sizing: border-box; } .dest-text{ position: absolute; bottom: 0; background: rgba(255,255,255,0.9); width: 100%; padding: 0px 10px; } </style> </head> <body translate="no"> <div style="padding:10px;"> <div class="dest-item"> <img src="https://www.java2s.com/style/demo/Firefox.png"> <div class="dest-caption"> <div class="dest-text"> <h3>This is a caption</h3> </div> </div> </div> </div> </body> </html>