Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 12 hours ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 4 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Fade between a background image with CSS3

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration

AshleyAshley

Creating an image rollover is pretty easy with CSS. 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.

This method uses a CSS sprite image, you could easily use two images but it’s best to save them in one file so we only make one HTTP request to the server.

The Code


.button{
height:47px;
width:156px;
background:url(images/hover_sprite.png) top center;
position: relative;
cursor:pointer;
}

.button span{
position: absolute;
top:0;
left:0;
height:47px;
width:156px;
background:url(images/hover_sprite.png) bottom center;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}

.button span:hover{
opacity: 1;
}

download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 11
  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    really nice and helpful post thanks


  • Reis
    Posted on

    Reis Reis

    Reply Author

    Thanks for sharing…


  • ben
    Posted on

    ben ben

    Reply Author

    nooby here,

    Where do i put the code? Is it something I place in the stylesheet css and call using it’s class on a page? If so how do i call it?


  • Ali
    Posted on

    Ali Ali

    Reply Author

    That looks great. Thanks for tutorial.


  • Mark
    Posted on

    Mark Mark

    Reply Author

    Thank you, your tutorial is very nice!


  • Samy
    Posted on

    Samy Samy

    Reply Author

    Very good, thanks!


  • kme
    Posted on

    kme kme

    Reply Author

    Not for IE 8 and lower :-(


  • Mariusz
    Posted on

    Mariusz Mariusz

    Reply Author

    For a simple gradient like that CSS gradient would be enough – and it would fade through without any hacks needed.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hey Mariusz,

      Totally agree. This is more a demonstation of technique rather than usage.

      Ashley


    • d21
      Posted on

      d21 d21

      Reply Author

      you can use gradients for IE lower browers not the sprite image that you make.. nice thought mate.. keep it up!!