Posted By

vaughanj on 05/03/13


Tagged

hover rollover


Versions (?)

Fade between a background image with CSS3


 / Published in: CSS
 

URL: http://papermashup.com/fade-between-a-background-image-with-css3/

Give the element a background-image, Then absolute position a span element within the div. Then you just need to set the opacity of the span element to 0, and animate the opacity on span:hover.

  1. .button{
  2. height:47px;
  3. width:156px;
  4. background:url(images/hover_sprite.png) top center;
  5. position: relative;
  6. cursor:pointer;
  7. }
  8.  
  9. .button span{
  10. position: absolute;
  11. top:0;
  12. left:0;
  13. height:47px;
  14. width:156px;
  15. background:url(images/hover_sprite.png) bottom center;
  16. opacity: 0;
  17. -webkit-transition: opacity 0.5s;
  18. -moz-transition: opacity 0.5s;
  19. -o-transition: opacity 0.5s;
  20. }
  21.  
  22. .button span:hover{
  23. opacity: 1;
  24. }

Report this snippet  

You need to login to post a comment.