Some help required on a CSS3 Rollover Transition

[MrPixel]

Hello everyone

im a web designer from the UK and this is my first post so i hope someone can help me with my problem.

Im fluent in CSS, and ive been learning CSS3 over the last couple of months with some great results.

There is an idea im trying to achieve on a new site but ive hit a brickwall.

Ive got a div 220px a 120px with an image the same size set as the background which ive created as a 240px high sprite. I wanted a 2 stage rollover done in pure css, so my code is as follows.

#example {
width:220px;
height:120px;
background:url(../images/example.png) -0px -0px;
}

#example:hover {
background:url(../images/example.png) -0px -120px;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}

Now the image rolls down when you hover over it due to the sprite with the above CSS3 transition, but i wanted a second stage where a mask rolls back up over the second image with a solid bg color and some text a little bit after the 1st stage.

Ive managed to create a mask on another div to create this effect with some text sliding in on a solid color bg, but this 2 stage idea is beyond me atm. Basically ive got a monotone image to start, i want it to go to the colour version on hover, then 3-4 secs later i wanted a mask of a solid bg color and some text to slide in over the colour image.

Im sure this is possible, but ive come unstuck. If some kind soles on here can advise how to achieve this effect i would really appreciate it.

[Billy]

All you need to do is have the transition code in the first one as well:

#example {

width:220px;

height:120px;

background:url(../images/example.png) -0px -0px;

-webkit-transition:all .2s ease-in-out;

-moz-transition:all .2s ease-in-out;

-o-transition:all .2s ease-in-out;

transition:all .2s ease-in-out;

}



#example:hover {

background:url(../images/exampleOver.png) -0px -120px;

-webkit-transition:all .2s ease-in-out;

-moz-transition:all .2s ease-in-out;

-o-transition:all .2s ease-in-out;

transition:all .2s ease-in-out;

}

[MrPixel]

@cnwtx – Thanks for that, pretty close yea. How would you have a third colour come in? I wanted a b&w image to change colour, then the solid colour bg and text to slide in like your example. Your is only 2 stage, the hover been the 2nd. Then the slide in part been the 3rd.

@cynewatch – Ive tried that already, all that does is slide the sprite back out when you hover off. I wanted a 3 stage transition. Normal, hover, then the slide in bg and text.

[MrPixel]

@cnwtx.

thanks for taking to the time to complete that, thats pretty much what i wanted. Would i just set the background in the css to relate to the two images? and leave the span as the colour? I asked this question on another forum and the answers ranged from ‘it cant be done’ to ‘you need to use jQuery’ when i knew it could be done in CSS3.

Again, hats off to you sir.

[MrPixel]

Again, thanks for your input on this, ill have a play around, maybe reduce the timing a bit because someone might hover off before the third transition.

Edit. Ive just changed the times to 200ms and the yellow bg still takes its time, which part of the code alters the timing of the last transition? hover:span?

[MrPixel]

I understand, thanks for your input on this. :)

[Author]

Posts