Amazing Image Hover Effects with Webkit and CSS 3

Sep18

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.

amazing-image-hover-effects-lead-image

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.

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.

Here are some good resources and articles that you might want to check out:

Tags: , , , ,

Comments

Wanna share your thoughts? Leave a message
93
  1. Gordon
    September 22nd, 2009
    at 10:02 am

    Nice demo. Too bad only webkit would support these kind of awesome animation effects.

  2. Linda
    September 27th, 2009
    at 3:52 am

    Great stuff. Thanks.

  3. Linda
    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?

    • Brad Kemper
      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.

  4. Jeremy Swinnen
    September 27th, 2009
    at 6:32 pm

    Nice example. How can i show an image on hover and active?

  5. dani
    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

  6. dani
    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

  7. impressive

  8. Hey, this is cool! Wonder when all these features will be implemented in all major web browsers…

  9. Nice effects indeed . Webkit based browser are great and designing for them is a pleasure.

    Thank you for these examples !

  10. Awesome efects with CSS3, now javascript isn’t necessary, hihi ;D

  11. if i replaced img with a, would that make my links fade in and out like that???

  12. Awesome tutorial. I have added this on my css aggregator site, hope you dont mind. :)

  13. very good work, i enjoy it!!

  14. Gareth
    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.

  15. 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

  16. Bim
    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!

  17. 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)

  18. Thank you for these examples.

  19. dodobrain
    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

  20. Great post, Dino! And I love your choice of images! — My desk where I develop is surrounded by transformers. :)

  21. nice demo, thanks

  22. 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.

  23. Mj
    March 30th, 2011
    at 5:13 pm

    I like this hover effect a lot. Thanks for sharing ya.

  24. Jon
    September 15th, 2011
    at 9:14 am

    IE not support…all the images replace by a black background,any idea??

    • 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

    • 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(

    • increíble! atmlaucente solo es compatible con ciertas plataformas, pero todo llegará, habrá que ponerse las pilas My recent post

  25. Gracias me fue muy útil para mi proyecto..

  26. Nice work. I really like the effects.

  27. 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?

  28. circleb
    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;

  29. prakash
    July 21st, 2012
    at 1:34 pm

    Transition no 3 and 6 not working on my chrome version…is there any webkit bug?

  30. Thank you very much. very useful trick!

  31. That was awesome tutorials. Going to implement it. Will post here if i face trouble!

  32. Very Good! Cheers

  33. 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

  34. Very Very Very Best Article

  35. Best article for newbee who don’t know about the webkit effects…

  36. There is a mistake in demo3.

    The div after the image is missing the class “details”

    Transformers
    More than meets the eye

  37. great work……. really fun

  38. Well done guy..

  39. Nikola petrovic
    September 5th, 2013
    at 2:54 am

    Wow thats advance stuff!
    i’ve created a very very simple tutorial with live examples that would benefit the less experienced coders, if you would allow the link here it is if not just edit this part of the comment.

    http://fivera.net/simple-cool-live-examples-image-hover-css-effect/

  40. I love it when people get together and share opinions.
    Great website, keep it up!

  41. Hi! I just want to offer you a huge thumbs up for your great information you’ve got
    here on this post. I will be returning to your site for more soon.

  42. I like the helpful information you supply in your
    articles. I’ll bookmark your bog and test once more right here frequently.
    I’m fairly sure I’ll be informed many new stuff proper here!
    Best of luck for thee following!

  43. This design is spectacular! You most certainly know how to keep a reader entertained.
    Between yourr wit and your videos, I was almost moved to start
    my own blog (well, almost…HaHa!) Great job. I really
    loved what you had to say,and more than that, how you
    presented it. Too cool!

  44. Country vacations Kovalam is putting a great step
    to make the tourists and travelers aware and familiar with this
    place. You can find vacation deals by looking online and researching in advance.
    The all-inclusive singles resort has no other guests than other single travelers.

  45. Hello there! Do you use Twitter? I’d like to follow you
    if that would be okay. I’m definitely enjoying your blog and look forward to new posts.

  46. What a stuff of un-ambiguity and preserveness of valuable know-how about unpredicted feelings.

  47. I’m extremely pleased to uncover this web site. I want to to thank you for ones time just for this
    wonderful read!! I definitely appreciated every part of it and i
    also have you bookmarked to see new stuff on your
    site.

  48. Very nice post. I just stumbled upon your blog andd wished
    to say that I’ve reqlly enjoyed surfing around youyr blog posts.
    In any casse I’ll be subscribing to your rss feed and I hope you
    write again soon!

  49. ” Among these deals is the $179 32-inch Sceptre 720p HDTV, as well as a $359 Sony PS3 Ultimate Bundle and a $79 7-inch tablet deal. These games can be played completely free of cost when played online. , players have discovered infinite money glitches and other exploits.

  50. I know this if off topic but I’m lokking into starting my own blog and
    was curious whast all is needed to get setup?
    I’m assuming having a blog like yours would cost a pretty penny?

    I’m nnot very internet saqvvy so I’m not 100% certain. Any suggestionns or advice would be greatly appreciated.
    Thanks

  51. Howdy! This article could nnot bbe written anyy better! Going
    through this article reminds mee of my previous roommate!
    He always kept talking about this. I most certainly will forward this article to
    him. Pretty sure he’ll have a great read. I appreciate yyou
    for sharing!

  52. You should be a part of a contest for one of the highest quality websites on the
    web. I will highly recommend this website!

  53. Great blog here!Also your web site loads up fast! What weeb host are you using?
    Caan I get your affiliate link to your host? I wish my website
    loaded uup as fasat as yours lol

  54. I’m gone to inform my little brother, that he should also pay a visit this webpage on regular basis to
    get updated from most recent reports.

  55. SEO
    March 1st, 2014
    at 11:13 pm

    Excellent willing synthetic eyesight meant for details and may foresee troubles just before they take place.

  56. I like to share understanding that I have built up with the 12
    months to assist improve group performance.

  57. Wow that was unusual. I juyst wrote an really long comment but after I
    clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that
    over again. Anyways, just wanted to say superb blog!

  58. If some one wants too be updated wuth most up-to-date technhologies after that he must be go too see this web sie and bbe up too date every day.

  59. Yes! Finally someone writes about converter avi to mpeg.

  60. My family members all the time say that I am killing my time here at web, but
    I know I am getting knowledge daily by reading thes good posts.

  61. Evefy weekend i uused to pay a quick vist this website,
    as i wish for enjoyment, ass this this website conations actually nioce funny data too.

  62. I was suggested this web site by my cousin. I am not
    sure whether this post is written by him as no
    one else know such detailed about my problem. You’re amazing!
    Thanks!

  63. Saturating a community with mailers works to a certain degree, but it’s not everything.
    The achievement will bbe in tthe form of response lists. If you find that you didn’t bring in many sales after a while, go another route with your direct mail projects.
    Campaigning can be well executed through thesse postcards which will work well according to the
    desire off the psychiatry 77024 advertiser. You can find a reliable San Antonio djrect mailing
    company that can do one or both for you.

  64. chanel Bags outlet
    Wow, this post is nice, my younger sister is analyzing these kinds of things, thus I am going to let know her.

Leave a Reply

Tell us what you think

Commenting Rules

  1. Anonymous comments will be disapproved. You don't need to sign up or register. All I'm asking from you is to leave your real identity.
  2. Learn respect to gain respect!
  3. Hate comments and personal attacks are not allowed.
  4. I hate SPAM so do not worry about your emails, I won't use them or share them for personal gain.
  5. I reserve the right to moderate.

Find me on the Web

Other places you can find me

Daily Digest

Resource Sites for Inspiration

Extra Stuff

Represent!

Search this Website

Looking for something specific?