Posted By

jntu_gnec on 03/22/12


Tagged

FadingGoogleButtonBoxmegawrz


Versions (?)

Fading Google Button Box


 / Published in: CSS
 

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

Simple Demonstration For a Fading Button Box..

  1. HTML :
  2.  
  3. <div class="holder">
  4. <a target="_blank" href="https://plus.google.com/113096484888668600653/posts">
  5. <div class="h1"></div>
  6. <div class="h2"></div>
  7. <div class="h3"></div>
  8. </a>
  9. </div>
  10.  
  11.  
  12. CSS:
  13.  
  14. .holder {
  15. position: relative;
  16. width: 215px;
  17. height: 215px;
  18. margin: 20px;
  19. z-index: 999a;
  20. cursor: pointer;
  21. }
  22. .h1 {
  23. background: url(http://picbox.im/image/209a643d3d-1.png);
  24. width: 210px;
  25. height: 86px;
  26. position: absolute;
  27. z-index:10;
  28. }
  29. .h2 {
  30. background: url(http://picbox.im/image/29ce86daf0-g.png);
  31. width: 181px;
  32. height: 92px;
  33. position: absolute;
  34. z-index: 20;
  35. top: 90px;
  36. left: 14px;
  37. -webkit-transition: all 1s ease-in-out;
  38. -moz-transition: all 1s ease-in-out;
  39. -o-transition: all 1s ease-in-out;
  40. -ms-transition: all 1s ease-in-out;
  41. transition: all 1s ease-in-out;
  42. }
  43. .h3 {
  44. background: url(http://picbox.im/image/87659c6f06-2.png);
  45. width: 210px;
  46. height: 174px;
  47. position: absolute;
  48. z-index:30;
  49. top: 37px;
  50. }
  51. .holder:hover .h2 {
  52. top: -5px;
  53. }

Report this snippet  

You need to login to post a comment.