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.
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.
add the same transition to @example as it’s hover state – only problem is it will also transition when the page loads… works in Opera, not sure about others.
It’s actually something that stops me from using transitions is the transition INTO the default state can often look annoying or even broken… well, that and I’m not actually a fan of animations in user interfaces. I click on something or roll-over something I want to see it NOW, not a few moments from now after some stupid animation.
Thanks for taking the time to reply. I know about usability etc but this site is a little outside the box.
Your suggestion doesnt work, if you add it to the hover state, the image slides in then slides out.
I want it to either slide in and a third state to trigger after a couple of seconds, or when you hover over the b&w image, it fades to the colour image and a solid colour with text to come in over that.
I’m not certain what you mean – or more specifically how you would trigger or indicate a ‘third state’ – there’s hovered, and un-hovered… what would the third one be?
Are you actually saying have it one state before it’s hoved, one when hovered, and a third AFTER it’s been hovered the first time? If so CSS can’t do that, you’re looking for a scripted solution – which is when I’d swing an axe at the idea.
Well, maybe not… you could have onmouseover=“this.className=‘hoveredOnce’” and then trap it by the class… wouldn’t work scripting off, but the code bloat wouldn’t be too massive. (though I’d probably apply those mouseovers using a targeting script right before </body>)
Ive got some CSS3 transitions on some images at the moment where you hover over them and a solid colour bg slides in with some text on it, you hover off and the bg slides back out.
I wanted the same idea but with an image fade before this state triggered, so b&w to colour to slide-in bg.
In fact, im just going to use a gradual fade in using a span on the div. So from b&w photo to colour setting the opacity to 0 on the span, then on example:hover span opacity to 1. Ive just done it and it works fine.
Oh, you were asking for dual effect… I’ve not done it, but the property you are looking for is transition-delay. If you set the second effect’s delay to the same as the first effect’s duration, the second animation will start the same time the first one finishes…
In theory. The trick would be getting the second animation on the same element – which would take something like a dummy span or a empty generated content using :before and/or :after. You just make an inner element the same size as the outer one, when the hover triggers fade the outermost element (which would be bottom indexed) then slide in the :after element.
If you follow my intent. I’d have to play with it. No promises, but if insomnia strikes again I’ll take a stab at it. Really to do what you’re asking, you’ll NEED that extra element as you can’t currently stack animations with different times on just one.
Can’t say I’ve played around much with transitions either but as DS suggests the transition-delay will provide the effect you need in latest Firefox and webkit.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#test, #test div {
position:relative;
height:399px;
width:425px;
margin:0 auto;
overflow:hidden
}
#test img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#test img.top:hover { opacity:0; }
#test div {
position:absolute;
top:-399px;
background:rgba(255,102,204,0.7);
-webkit-transition-property:top;
-webkit-transition-duration: 2s;
-webkit-transition-delay: 3s;
-moz-transition-property:top;
-moz-transition-duration: .2s;
-moz-transition-delay: 3s;
transition-property:top;
transition-duration: .2s;
transition-delay: 3s;
}
#test:hover div { top:0 }
</style>
</head>
<body>
<div id="test"> <img class="bottom" src="images/img425x399-1.gif" width="425" height="399" alt="test"><img class="top" src="images/img425x399-2.gif" width="425" height="399" alt="test">
<div>
<h3>Test</h3>
<p>lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text </p>
</div>
</div>
</body>
</html>
