Add caption for image on image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Caption

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

Description

Add caption for image on image

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>card color gradient</title> 
  <style>

.card {<!--from  w w  w  .j av  a 2s . c om-->
   position: relative;
   width: 250px;
}
.my {
   position: absolute;
   bottom: 0;
   padding: 40px 20px 20px 20px;
   background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0));
}
.my,
.my__body {
   display: block;
   color: white;
}
.my {
   font-size: 1.4em;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="card"> 
   <img src="https://www.java2s.com/style/demo/Safari.png" alt=""> 
   <div class="my"> 
    <span class="my">Lorem Ipsum</span> 
    <span class="my__body">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials