Placing an image centrally over another image with responsive width and height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

Placing an image centrally over another image with responsive width and height

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">
#logo {<!-- w  w w.  j a  va 2s.c  o  m-->
   width:51%;
   height:51%;
   position:relative;
}

#heart {
   display:block;
   position:absolute;
   margin:19% 15%;
   z-index:2;
   width:71%;
   height:71%;
}

#heart-container {
   display:block;
   position:absolute;
   top:0;
   left:0;
   z-index:2;
   padding:51%;
}

#heart-container {
   border-radius:51%;
   behavior:;
   padding:51%;
   background:Chartreuse;
   border:3px solid yellow;
   color:blue;
   text-align:center;
   font:33px Arial, sans-serif;
}

#heart:before,
#heart:after {
   position:absolute;
   content:"";
   left:91px;
   top:0;
   width:91px;
   height:131px;
   background:red;
   -moz-border-radius:51px 51px 0 0;
   border-radius:51px 51px 0 0;
   -webkit-transform:rotate(-46deg);
   -moz-transform:rotate(-46deg);
   -ms-transform:rotate(-46deg);
   -o-transform:rotate(-46deg);
   transform:rotate(-46deg);
   -webkit-transform-origin:0 100%;
   -moz-transform-origin:0 100%;
   -ms-transform-origin:0 100%;
   -o-transform-origin:0 100%;
   transform-origin:0 100%;
}

#heart:after {
   left:0;
   box-shadow:11px 11px 100px pink;
   -webkit-transform:rotate(46deg);
   -moz-transform:rotate(46deg);
   -ms-transform:rotate(46deg);
   -o-transform:rotate(46deg);
   transform:rotate(46deg);
   -webkit-transform-origin:100% 100%;
   -moz-transform-origin:100% 100%;
   -ms-transform-origin:100% 100%;
   -o-transform-origin:100% 100%;
   transform-origin:100% 100%;
}
</style> 
 </head> 
 <body> 
  <div id="logo"> 
   <div id="heart-container"> 
   </div> 
   <div id="heart"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials