I’ve been playing with Webkit transitions for quite sometime and so far I’m really impressed with what it can do. Animations and effects that I thought was only possible with jQuery is now possible with CSS and webkit.
Webkit is impressive. I’ve been tinkering with Google Chrome and Safari 4, the main browsers that use the Webkit rendering engine, and all I can say is they’re both fast and real good browsers. What I thought was only possible with a few Javascript snippets is now possible with webkit. In this post, I will show you demonstration and examples of what Webkit and CSS can do.
The animation effects will only be viewable on Google Chrome and Safari 4+
Image Shrink Effect
The image will shrink if you put your mouse pointer on top of it. It is achieved by using the -webkit-transform:scale(value) property.
The HTML
<div id="demo-1" class="demobox"> <img src="optimusprime.jpg"/> </div>
The CSS
#demo-1 img {
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-1 img:hover{
-webkit-transform: scale(.5);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
Notice how the HTML looks very simple. It’s just a simple <img/> tag but with webkit, you can achieve a very cool effect.
Fade Out Image Effect
On mouse hover, the image will fade out to 50% opacity smoothly.
The HTML
<div id="demo-2"> <img src="optimusprime.jpg"/> </div>
The CSS
#demo-2 img {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-2 img:hover{
opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
Fade in Description Box Effect
When you hover your mouse over the image, a box will fade in smoothly with its title and description.
The HTML
<div id="demo-3"> <img src="optimusprime.jpg"/> <div> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div>
The CSS
#demo-3{position:relative;}
#demo-3 img{
opacity:1
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-3 .details{
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-3 .details:hover{
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
Image Slide Out Effect
The image is above the description box and when the mouse is hovered over the image, it will slide out revealing the description box.
The HTML
<div id="demo-4"> <img src="optimusprime.jpg"/> <div> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div>
The CSS
#demo-4{position:relative;}
#demo-4 img{
position:absolute;
top:0;
left:0;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-4:hover img{
margin-left:200px;
}
#demo-4 .details{
position:absolute;
top:0;
left:0;
z-index:-1;
}
Slide In Box Effect
The description box will slide in on top of the image on mouse hover.
The HTML
<div id="demo-5"> <img src="optimusprime.jpg"/> <div> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div>
The CSS
#demo-5{position:relative;}
#demo-5 .details{
opacity: .9;
position:absolute;
top:0;
left:0;
margin-left:-200px;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-5:hover .details{
margin-left:0;
}
Zoom in Box Effect
The description box will zoom out from the middle of the image when the image is triggered by mouse hover.
The HTML
<div id="demo-5"> <img src="optimusprime.jpg"/> <div> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div>
The CSS
#demo-6{
position:relative;
}
#demo-6 img{
position:absolute;
top:0;
left:0;
z-index:0;
}
#demo-6 .details{
opacity: .9;
position:absolute;
top:100;
left:150;
z-index:999;
-webkit-transform: scale(0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
#demo-6:hover .details{
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
These examples are just a few things the Webkit engine can do. The question now is, can we use these on real world projects? Why, of course. We might just need a little work for browsers that doesn’t support these awesome transition effects.
Having good designs would help you better establish your own site. It also important that you choose a good host to run your website.
The animation effects will only be viewable on Google Chrome and Safari 4+
Here are some good resources and articles that you might want to check out:
Tags: css, CSS3, Hover Effects, Image Effects, Webkit
September 22nd, 2009
at 10:02 am
Nice demo. Too bad only webkit would support these kind of awesome animation effects.
September 27th, 2009
at 3:52 am
Great stuff. Thanks.
September 27th, 2009
at 3:55 am
Now I will have to figure out how to do the transition in the onclick of a link to transition to a div of text. I guess it would take changing the class of the link?
April 6th, 2010
at 12:03 pm
Yes. Or, if you want it only when moused-down, and then back to normal on mouse-up, then you could use the :active pseudo-class.
September 27th, 2009
at 6:32 pm
Nice example. How can i show an image on hover and active?
October 21st, 2009
at 10:57 pm
there’s a little mistake in demo5…
the inner div needs to have the class=”details”
so that it looks like this:
Transformers
More than meets the eye
but thanks a lot for the examples they are pretty nice
October 21st, 2009
at 10:59 pm
oh sorry, havent thought about, that this box is able to read html ;)
next try.. :
Transformers
More than meets the eye
December 23rd, 2009
at 8:56 am
You shouldn’t put HTML directly into this box. Instead try converting your code snippet into a friendly readable text here: http://www.elliotswan.com/postable/
January 4th, 2010
at 5:17 pm
impressive
January 5th, 2010
at 8:52 pm
Hey, this is cool! Wonder when all these features will be implemented in all major web browsers…
February 10th, 2010
at 6:11 pm
Nice effects indeed . Webkit based browser are great and designing for them is a pleasure.
Thank you for these examples !
February 17th, 2010
at 11:52 am
Awesome efects with CSS3, now javascript isn’t necessary, hihi ;D
May 5th, 2010
at 3:33 am
if i replaced img with a, would that make my links fade in and out like that???
May 12th, 2010
at 9:32 pm
yeah, you could do that.
May 21st, 2010
at 3:48 pm
Awesome tutorial. I have added this on my css aggregator site, hope you dont mind. :)
June 25th, 2010
at 5:37 am
very good work, i enjoy it!!
July 8th, 2010
at 12:26 am
Yo Dino
Fantastic article, thank you for writing this up!
I might be an idiot — with ‘Image Slide Out Effect’ how to I get the image to slide UP and not to the RIGHT?
Is this possible?
Any help would be greatly appreciated.
July 8th, 2010
at 5:36 pm
I done it! No worries!
July 9th, 2010
at 4:15 pm
Hi,
Article on Amazing Image Hover Effects with Webkit and CSS 3 is good and Website professional would take help to design and develop the Websites.
Dayanand from eprofitbooster.com
July 9th, 2010
at 6:03 pm
Great stuff, about time something like this became widely supported.
Can start making nicely designed web pages without having to switch to a heavy program such as flash, plus it actually interacts with the html of the page!
July 20th, 2010
at 1:47 am
of course it’s worth pointing out that these are not webkit exclusive…if, for instance, you find/replace “-webkit” in your css and use “-o” they all magically also work in the latest version of Opera (full disclosure: I work for Opera in their Developer Relations team)
July 26th, 2010
at 9:01 am
Thank you for these examples.
August 10th, 2010
at 2:07 pm
As said by the Opera guy above, the effects are not exclusive to webkit.
-webkit- are for webkit/safari
-o- maked them work in recent Opera
-moz- makes them work in recent FF
August 20th, 2010
at 2:27 am
Great post, Dino! And I love your choice of images! — My desk where I develop is surrounded by transformers. :)
December 19th, 2010
at 8:48 am
nice demo, thanks
March 21st, 2011
at 8:18 pm
You can use -moz- for firefox, and must use the propriety without webkit for new browsers understand. if you don´t use css keyframes like this example, new gecko browsers also works with the official proprieties names.
March 30th, 2011
at 5:13 pm
I like this hover effect a lot. Thanks for sharing ya.
September 15th, 2011
at 9:14 am
IE not support…all the images replace by a black background,any idea??
September 15th, 2011
at 5:13 pm
IE has little support for webkit effects but it should still just display the pictures as they are with no movement.
I have heard recently IE9 has started support for webkit using their own code.. so now we have to declare webkit 5 times:
border-radius:5px;//standard
-webkit-border-radius:5px;//chrome/safari
-o-border-radius:5px;//opera
-moz-border-radius:5px;//firefox
-ms-border-radius:5px;//IE9
for different functions the syntax can vary so it gets even more complex, such as gradient fills. i do hope they get it together soon
September 15th, 2011
at 5:20 pm
oh the reason they are black is probably cause ie doesn’t support opacity for the black div that sits ontop of the image. To set opacity in ie you use:
filter:alpha(opacity = 0);//0-100
which is supported far back as ie7 (maybe even 6(
February 8th, 2012
at 1:40 am
increíble! atmlaucente solo es compatible con ciertas plataformas, pero todo llegará, habrá que ponerse las pilas My recent post
September 26th, 2011
at 5:02 pm
Gracias me fue muy útil para mi proyecto..
October 15th, 2011
at 9:48 am
Nice work. I really like the effects.
November 2nd, 2011
at 4:15 am
how come when I preview the shrinking effect, it has a slight glitch to it. It only happens when I scroll down then scroll back up to it and hover over. A bright white box flashes on the screen. I copy and pasted the code straight from the site here. have you experienced anything like this?
March 22nd, 2012
at 10:01 pm
If you use these CSS rules it will work in nearly all browsers…
-webkit-transition: all 250ms ease-in;
-moz-transition: all 250ms ease-in;
-ms-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
transition: all 250ms ease-in;
July 21st, 2012
at 1:34 pm
Transition no 3 and 6 not working on my chrome version…is there any webkit bug?
August 16th, 2012
at 4:51 am
Thank you very much. very useful trick!
August 25th, 2012
at 8:54 pm
That was awesome tutorials. Going to implement it. Will post here if i face trouble!
August 29th, 2012
at 4:44 am
Very Good! Cheers
October 8th, 2012
at 3:56 am
Hi!
Totally rockin advice here. Is it possible to get webkit working to do this in a WordPress site? I’m using the Roots Theme, but I’m not sure if that’s relevent.
Any help is greatly appreciated!
David
November 9th, 2012
at 12:09 am
Very Very Very Best Article
January 27th, 2013
at 3:10 pm
Best article for newbee who don’t know about the webkit effects…
February 6th, 2013
at 9:44 am
There is a mistake in demo3.
The div after the image is missing the class “details”
Transformers
More than meets the eye
March 21st, 2013
at 2:51 am
great work……. really fun
May 13th, 2013
at 7:28 am
Well done guy..
May 17th, 2013
at 2:50 am
Much agreed. I find out a little something completely new and
complex on pages I come upon on http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/ on a daily basis.
It’s never a bad idea to connect with the ideas and material of other writers and link to other sites.