Align Top of Background with Bottom of Element with CSS - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Parent Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Parent Container

Description

Align Top of Background with Bottom of Element with CSS

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">
.example {<!--   w  ww . j  a va 2s.co  m-->
   border:2px solid Chartreuse;
   height:501px;
   width:501px;
   position:relative;
   overflow:hidden;
}

.example:hover .backgroundImage {
   top:0%;
}

.backgroundImage {
   background:url('http://www.java2s.com/style/demo/Google-Chrome.png') no-repeat top left;
   height:301px;
   width:301px;
   position:relative;
   margin:0 auto;
   top:100%;
   -webkit-transition:2s ease all;
   -moz-transition:2s ease all;
   transition:2s ease all;
}
</style> 
 </head> 
 <body> 
  <div class="example"> 
   <div class="backgroundImage"></div> 
  </div>  
 </body>
</html>

Related Tutorials