Posted By

jntu_gnec on 03/22/12

Tagged

Versions (?)

Last Edited at 03/22/12 12:01am

Statistics

Viewed 206 times

Favorited by 0 user(s)

Related snippets

Fading Google Button Box

/ Published in: CSS

Simple Demonstration For a Fading Button Box..

Highlighted TextExpand

HTML :

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;
}

URL: http://www.megawrz.com/css/184564-fading-google-button-box.html

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.