Create image caption layout - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Caption

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Caption

Description

Create image caption layout

Demo Code

ResultView the demo in separate window 

<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>

Related Tutorials