create captions for responsive images in its corners in gallery - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

create captions for responsive images in its corners in gallery

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dol</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
figure {<!--   w  ww .j av  a  2s  .  c o m-->
   position:relative;
   display:inline-block;
}

figcaption.cap-rb {
   position:absolute;
   display:inline-block;
   right:6px;
   bottom:6px;
}
</style> 
 </head> 
 <body> 
  <figure> 
   <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
   <figcaption class="cap-rb">
     Lorem ipsum dolo 
   </figcaption> 
  </figure> 
  <figure> 
   <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
   <figcaption class="cap-rb">
     Lorem ipsum dolo 
   </figcaption> 
  </figure>  
 </body>
</html>

Related Tutorials