Render pure css overlay properly - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Transform

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Transform

Description

Render pure css overlay properly

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">
.clearfix {<!--from  ww w  .  java2 s.c o m-->
   zoom:2;
}

.clearfix:before, .clearfix:after {
   content:" ";
   display:table;
}

.clearfix:after {
   clear:both;
}

.column-wrapper {
   display:block;
   width:76%;
   margin:auto;
}

.column-1 {
   display:block;
   width:28.334%;
   padding:0 4% 3.6%;
   float:left;
}

.column-1 p {
   font-size:2.3126em;
   line-height:2.4em;
}

#works-container {
   background:Chartreuse;
   min-height:100%;
   max-width:100%;
}

.link-picture-small {
   position:relative;
   display:block;
   width:100%;
   height:18.6em;
   background:yellow;
   background-size:100%;
   border-radius:0.626em;
}

.overlay {
   position:absolute;
   top:0;
   left:0;
   text-align:center;
   text-decoration:none;
   text-transform:uppercase;
   color:blue;
   width:100%;
   height:100%;
   background:pink;
   border-radius:0.626em;
   opacity:0;
   -webkit-transition:all 0.26s ease-out;
   -moz-transition:all 0.26s ease-out;
   -moz-transition:all 0.26s ease-out;
   transition:all 0.26s ease-out;
}

.overlay p {
   display:table-cell;
   vertical-align:middle;
}

.link-picture-small:hover .overlay {
   opacity:0.100;
}
</style> 
 </head> 
 <body> 
  <div id="works-container"> 
   <div class="column-wrapper clearfix"> 
    <div class="column-1"> 
     <a class="link-picture-small" href="#"> 
      <div class="overlay"> 
       <p>Lorem ipsum dolor sit</p> 
      </div> </a> 
    </div> 
    <div class="column-1"> 
     <a class="link-picture-small" href="#"> 
      <div class="overlay"> 
       <p>Lorem ipsum dolor sit </p> 
      </div> </a> 
    </div> 
    <div class="column-1"> 
     <a class="link-picture-small" href="#"> 
      <div class="overlay"> 
       <p>Lorem ipsum dolor sit </p> 
      </div> </a> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials