center image when browser resizes and make responsive inside figure tag - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

center image when browser resizes and make responsive inside figure tag

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.mover2 {<!--   w  ww . j a  va2  s  .  c o  m-->
   position:relative;
   left:-34%;
   top:-9%;
   width:100%;
   height:78%;
   display:block;
}

.arreglo2 {
   width:100%;
   height:100%;
   display:block;
}

#mas2 {
   background:Chartreuse;
}

figcaption.efectoimg2 p {
   text-align:center;
   font-family:Arial;
   color:yellow;
   font-weight:bold;
   position:relative;
   bottom:16px;
   font-size:100%;
}

@media only screen and (max-width : 1100px) {
   .mover2 {
      margin:auto;
      left:inherit;
      top:inherit;
      float:none;
   }

}
</style> 
 </head> 
 <body> 
  <figure class="imghvr-push-up mover2"> 
   <img class="arreglo2" src="https://www.java2s.com/style/demo/Opera.png"> 
   <figcaption class="efectoimg2" id="mas2"> 
    <p>Lorem ipsum dolor s</p> 
   </figcaption> 
  </figure>  
 </body>
</html>

Related Tutorials