Advanced Search

Return to Snippet

Revision: 56322
at March 22, 2012 00:05 by jntu_gnec
Updated Code 
HTML :

<div class="holder">
  <a target="_blank" href="https://plus.google.com/113096484888668600653/posts">
	  <div class="h1"></div>
  	<div class="h2"></div>
  	<div class="h3"></div>
  </a>
</div>


CSS:

.holder {
   position: relative;
   width: 215px;
   height: 215px;
   margin: 20px;
   z-index: 999a;
   cursor: pointer;
}
.h1 {
   background: url(http://picbox.im/image/209a643d3d-1.png);
   width: 210px;
   height: 86px;
   position: absolute;
   z-index:10;
}
.h2 {
   background: url(http://picbox.im/image/29ce86daf0-g.png);
   width: 181px;
   height: 92px;
   position: absolute;
   z-index: 20;
   top: 90px;
   left: 14px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.h3 {
   background: url(http://picbox.im/image/87659c6f06-2.png);
   width: 210px;
   height: 174px;
   position: absolute;
   z-index:30;
   top: 37px;
}
.holder:hover .h2 {
    top: -5px;
}

Revision: 56321
at March 22, 2012 00:01 by jntu_gnec
Initial Code 
HTML :

<div class="holder">
  <a target="_blank" href="https://plus.google.com/u/0/b/108022299398192291562/108022299398192291562/">
	  <div class="h1"></div>
  	<div class="h2"></div>
  	<div class="h3"></div>
  </a>
</div>


CSS:

.holder {
   position: relative;
   width: 215px;
   height: 215px;
   margin: 20px;
   z-index: 999a;
   cursor: pointer;
}
.h1 {
   background: url(http://picbox.im/image/209a643d3d-1.png);
   width: 210px;
   height: 86px;
   position: absolute;
   z-index:10;
}
.h2 {
   background: url(http://picbox.im/image/29ce86daf0-g.png);
   width: 181px;
   height: 92px;
   position: absolute;
   z-index: 20;
   top: 90px;
   left: 14px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.h3 {
   background: url(http://picbox.im/image/87659c6f06-2.png);
   width: 210px;
   height: 174px;
   position: absolute;
   z-index:30;
   top: 37px;
}
.holder:hover .h2 {
    top: -5px;
}
Initial URL 
http://www.megawrz.com/css/184564-fading-google-button-box.html
Initial Description 
Simple Demonstration For a Fading Button Box..
Initial Title 
Fading Google Button Box
Initial Tags 









Initial Language





CSS