5 Cool CSS Hover Effects You Can Copy and Paste

by on 5th May 2011 with 143 Comments

Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration.

If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy.

Bring Your Boring Site to Life

Hover effects can make your site feel much more dynamic and alive. It used to be the case that JavaScript was required to do anything really interesting with a hover effect but these days CSS3 is capable of doing a ton of really cool stuff if you’re creating enough.

The effects we’ll be using today all use code that is supported by modern browsers, meaning of course Mozilla and Webkit for the most part. IE support is spotty at best across various versions so be sure to test thoroughly in your own implementation. Fancy hover effects are one of those things that you can usually degrade fairly gracefully so that older browsers still see some change.

Bump Up

screenshot

Live Demo: Click Here to Launch

This works best when you have a series of horizontal items. That way when you run your mouse across them you get a nice wave effect.

This one is super easy to implement and there are in fact several ways to go about it. What I did below is just apply a margin to each image and then reduced that margin on hover. The margin starts at 15px, then reduces to only 2px on hover, which makes the image jump up. You could easily use this same effect on text items if they were in a list.

The transition here is completely optional as the effect still works quite well without it. Just to make it a little smoother though I threw in a quick animation set to ease-out, which I thought provided the best effect for this particular subject.

Bump Up CSS

.ex1 img{ border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; } .ex1 img:hover { margin-top: 2px; }

Stack & Grow

screenshot

Live Demo: Click Here to Launch

For this one I wanted a sort of lava lamp effect so that as you move your mouse down the list, each image slowly expands and then goes back to its original size.

To accomplish this, I inserted a stack of images that were 400px wide by 133px tall. I then sized those images at 300px by 100px in the CSS and expanded on hover. Since I had a center alignment, the new size of the image threw off my alignment, a negative margin set to half the size of the growth in the width addressed this problem.

Stack & Grow CSS

/*Example 2*/ #container { width: 300px; margin: 0 auto; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #ex2 img:hover { height: 133px; width: 400px; margin-left: -50px; }

Fade Text in

screenshot

Live Demo: Click Here to Launch

For this one I wanted to create a JavaScript-like event where you could hover over one item and see an effect on another. What I've done to accomplish this is to throw some text and an image into a div and then float everything left so that the text is in line with the image. Next, I applied color: transparent and line-height: 0px to the div. This places the text at the top of the div and hides it.

To make the text appear on hover, I simply changed the color and line-height. When you hover over the image, the text zooms into view! It's a pretty neat trick considering it's all CSS.

Fade Text In CSS

#ex3 { width: 730px; height: 133px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex3:hover { line-height: 133px; color: #575858; } #ex3 img{ float: left; margin: 0 15px; }

Crooked Photo

screenshot

Live Demo: Click Here to Launch

This one is super simple but it's a great effect for a thumbnail gallery. The basic premise is that you create a grid of images and then set the images to rotate when you hover over them, creating the illusion of a crooked photo hanging on a wall.

We'll use lots of newer, browser-specific CSS on this one so you might want to add in something for older browsers as well. Our gallery will use box-shadows (optional), transitions and transforms to pull off the effect we want. The transform will handle the rotation and the transition will make it nice and smooth.

To take this one even further, you could use pseudo-selectors to make the images lean in different directions.

Crooked Photo CSS

#ex4 { width: 800px; margin: 0 auto; } #ex4 img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex4 img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

Fade In and Reflect

screenshot

Live Demo: Click Here to Launch

This one is pretty complicated so I had to wrestle with it quite a bit before I came up with an effect that I liked. The default state of the image is at a slightly reduced opacity. Then, when you hover over it, the opacity cranks to full, a glow appears around the edges and a reflection (Webkit only) pops up.

Unfortunately, the reflection isn't something that responds to a transition, so it sort of just pops in right away while the rest fades in, but it's still a pretty nice overall transition.

If you're confused about how CSS reflections work, you can read all about them in a great article from David Walsh.

Fade In and Reflect CSS

#ex5 { width: 700px; margin: 0 auto; min-height: 300px; } #ex5 img { margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Transition*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } #ex5 img:hover { opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }

Conclusion

These five examples should be enough to inspire you to create your own awesome CSS hover effects. Remember to experiment with these, combine them and add in your own flair to make them more interesting.

If you've spotted any cool hover effects around the web, we want to see them! Leave a comment below and link to a page with an example.

Comments & Discussion

143 Comments

Comments & Discussion

143 Comments

  1. Jon says:

    This is great, thanks!

  2. Greg Babula says:

    What a great post, this is all useful stuff – thanks!

  3. Mariely says:

    Nice work if everyone uses these tips will have an internet prettier. :)

  4. loved it, thanks for sharing!

  5. Eric says:

    Nice, I think I will try some of them on my website. Thanks for sharing!

  6. Jess says:

    These are really simple effective steps that can give a website so much zazz when it is only just a hover action! Already starting to think how i can incorporate this into the websites i work on.

    Tops.

  7. Kyle says:

    great stuff! anything to eliminate bulky javascript is welcome.

  8. Gabriel Nascimento says:

    Amazing!!!!

    Congrats my friend…

  9. Fade In and Reflect is a neat effect :). The shadow though needs adjustment since it shows first before the border/glow fade in.

    Overall though, quite impressive :)

  10. ahmad says:

    thats great, thanks…
    all amazing….

  11. Ma3oBblu says:

    thank, this great!

  12. Char says:

    I love it.. !

  13. DonW says:

    Thanks, I will use some of these.

    The last 2 don’t work in IE8.

  14. Ramkumaran says:

    very useful tips..thanks for sharing..great

  15. Moon Themes says:

    Great to see that CSS3 can do these effects, they are like jQuery.

  16. Dan says:

    Nice list thanks

    I’m currently trying to use these type of effects more and more to improve the user experience on sites I’m building

    Used well they they can really make a site more user friendly

  17. Ben says:

    Crooked Photo doesn’t work in IE9.

  18. cool, with the advent of ss3 is no longer necessary to use many javascripts

  19. Knoobie says:

    Love it, really nice! Thanks a lot

  20. Elke says:

    Very nice! I’m in “search-mode” where to use this :)
    Thanks!

  21. peSHIr says:

    Amazingly, the nearly all work in IE8 (meaning they actually work or they don’t seem to do anything really bad, but just don’t show the intended effect). Only exception is the text fade: the text that should fade in is showing in black and you get an ugly “jumping text” effect on the hover. Oh, and the Stack & Grow effect looks ugly and jittery (no easying?).

  22. Elena says:

    These are so cool. I especially like the stack one. Great job. This is going into my bookmarks for sure.

  23. Kyson Kane says:

    Awesome write up! I’ve totally digging the the rotation css. I’ve been wanting to do that on my blogs dates.

  24. Lalir says:

    I tried the last one on my site but unfortunately it didn’t work out :(

  25. ddeja says:

    Well done!

    This is exactly how tutorials should look like. Simple, organized and usefull. I look forward for the next sample of CSS3.

    Cheers.

  26. Claudia says:

    Thanx! Fine code – cool effects!

  27. KyawThura says:

    Awesome!

  28. billboc says:

    thank you ! very usefull and easy to try
    now waiting for the next one ;-)

  29. billboc says:

    PS: i hate IE

  30. Great effects. Didn’t know few of those even exist, since now :)

  31. Mainual says:

    I love this kind hover effect with some emotional thing http://dribbble.com/shots/139323-E-Dizains-Button-Hover

  32. WPExplorer says:

    These look awesome. It’s a shame that browsers like IE still don’t support a lot of these CSS3 effects.

  33. Cukri says:

    Thanks! This is great! :)

  34. 強積金 says:

    Awesome CSS to MPF

  35. Bora says:

    Thank you! Very useful! Keep up the good work.

  36. Theo says:

    Great examples!

  37. sanjananb says:

    Oh, and the Stack & Grow effect looks ugly and jittery (no easying
    http://www.lovereallove.com

  38. Vasilis says:

    Nice examples, unfortunately the code with the examples is not complete: you really should always end with the declaration without a prefix, for example in some examples you have a -webkit-transition, a -moz-transition and an -o-transition, there should be a plain ‘transition’ at the end for future browsers.

  39. Tommaso says:

    fantastic resource, i will use for my next project!

    i rate 9!..it would be 10 with the download file section of any example.

  40. francis austria says:

    nice!..this article is really useful and great…thanks for sharing…^_^..hope to learn more from the author/s…^_^..

  41. amna says:

    Thank you verymuch :D

  42. Hellonemo says:

    Wow another great CSS, i like this one.
    Thank you so much, i’ll recode and add to my site.

  43. Mohit says:

    This is an interesting post. Thanks for sharing this. I am sure it can spice up a few of my web designs.

  44. demo says:

    yyy …………these files are not worked in IE browsers…soooo badly

  45. paul says:

    Thanks nice tutorial and examples.

  46. NiceComment says:

    My nice comment!

  47. Oren says:

    thanks for this tips !
    i do have a small problem:
    in this page:
    http://kidumi.com/dorivry.co.il/projects/architecture1/

    1. when moving the pointer from the menu – there’s no ease effect. it goes straight to the default pos.

    2. when hovering, the tabs goes up about 2px. why is that ?

    how can i fix that?
    thanks :)

  48. fowziey says:

    Thanks. Amazing tutorial though it’s not working in IE8.

  49. endy says:

    thanks for the post.
    i’m using it in my social bookmark, and change the degree..
    thanks again..

  50. sergio says:

    Gracias por los tutoriales, muy prácticos y fácil de uso. :)

  51. Álvaro says:

    thanks, these examples are cool,

  52. Serge says:

    I love CSS3. The code is short and easy, but it gives a huge visual effect. Thanks a lot for sharing the samples!

  53. Really nice examples

    Thanks, used these in a few sites now

    Adam

  54. sakeri says:

    That is great bumper style. thanks to put in site.

  55. Robin Whelan says:

    When I perform the “Fade in And Reflect” effect and target a PNG image, the glow effect does not take to the image outline itself but rather the total size resulting in a box shadow. Is there a way to have the glow just on the image?

    Thanks in Advance

  56. vikko says:

    nice professional effects, will be using it.

  57. Clover says:

    These are cool, but you don’t explain how to actually use them on your site. If you had a small explanation I would use them. For now, I’m playing guess and check with your previews, trying to recreate it :/

  58. So I want to add the bump to my site’s top four images, but I’m unsure as to how to apply it. Do add the same code in the css? or do I apply to every individual image?

    If you have a suggestion just email it to me:
    oliver.s.smith@gmail.com

    Thanks!

  59. Sapna says:

    really that’s very nice

  60. Tork says:

    Great stuff!
    Thanks for sharing.

  61. Kersitn says:

    Great effects I had already done the graphics up to do this and could have saved time by using your effects!

  62. Manuela says:

    Found what I was searching for!! Thank you very much :)

    Hope one day to give favour back :)

  63. Masoud says:

    Amazing!!!
    These are really great!!!

    Thank you for this post

  64. Nevil says:

    i need full code of Stack & Grow CSS.
    plz send me a email of this.
    I’ll be very very thankl full to u……
    Yours,
    Nevil

  65. Shijith says:

    Great job man …

  66. Minerva says:

    Hey, this is great! I need some help though…how do I put the image in? I’m especially interested in the Fade Text in. Where do I put the image? And then in html, where do I put the code? I’m using tumblr, by the way :D

  67. Lidya says:

    verynice
    thank you. .
    :)

  68. Tommy B says:

    These are fantastic! They look fabulous and they’re not very difficult to implement. Thanks so much!

  69. XHTMLTEAM says:

    Awesome!! Thanks for the post.

  70. MikeB says:

    A very nice approach in CSS design.

  71. Oren says:

    Hello.
    very good tutorial! thanks you :)
    do have a question regarding Bump Up:
    Using the code i get the ease effect when hovering but is there a way to make it ease on the way back too?

  72. Fernando says:

    Excelent!!! Just excelent!!! Thank you very much.

  73. Lisa Firth says:

    Wow, these are great, thanks for sharing! It’s really innovative how you have managed to create such stylish effects in such a simple way, and without using any Javascript.

  74. Loiy Blog says:

    It’s really cool, thanks for sharing

  75. Live says:

    La verdad muy buenos ejemplos, me has inspirado para utilizarlos de buena manera gracias TANK YOU!!!!

  76. batigo says:

    Crooked Photo CSS is cool !….

  77. batigo says:

    Crooked Photo CSS is cool !…

  78. Tosin html says:

    really nice hovers,good for celebrity sites

  79. Calem says:

    Absolutely loved this! Thanks so much!

  80. this is absolutely 100% save my time to create crooked logo for my site, thanks! :)

  81. Shibby says:

    This is amazing.
    thank you very much for this!

  82. Arman says:

    This is so cool.. :)
    Thanks for this post

  83. Bogdan says:

    thank you , thank you , thank you !

  84. Nice Work. Bumb Up is really good

  85. John Allen says:

    Does anyone know how to apply the stack and grow to a “fixed” social bar? I would love to have the effect that is on the OSX toolbar, where the icon grows and then shrinks back down. Please if anyone could tell me how to do this I would love it. Thanks.

  86. Tomislav says:

    Thank you so much!
    Just to point out that you can animate backgrounds on hover with this technique.

  87. Keval says:

    Simply cool work guys.

  88. Mohit says:

    wooooooooo. that’a a great work

  89. Charlotte says:

    Can i do this in Dreamweaver? What does i need to fill inn? Please answer me!! Great work!

  90. Thanks for the great tips! I hope IE 10 allows animation with CSS.

  91. jdiid says:

    This is really awesome! straight to my bookmarks :)

  92. Wow, incredible blog format! How lengthy have you ever been blogging for? you made running a blog look easy. The full glance of your web site is great, as well as the content!

  93. fysisoft says:

    Thanks a lot for sharing it

  94. Rex says:

    This helped me and using it I made a simple snippet to show the author info using the CSS3 hover effects
    http://webstutorial.com/css3-image-hover-effects/css3

  95. Lei says:

    How do I make the Bump Up work on navigation images below my header?

  96. Sudhir says:

    it’s to good ……………

  97. nuuqq says:

    Is there a way to have the glow just on the image?

    Thanks in Advance

  98. Lei says:

    Okay, finally got Bump Up to work. Thanks!

  99. jaczjill says:

    superb..! really cool.. thanks!

  100. Neiljun says:

    great tutorials ! i’ll gonna use this in my project .. tnx much !

    looking forward to more tuts :))

  101. John says:

    Hi! Thank you so much for putting these codes out there. i have been trying to learn to apply these effect by my own but just kept getting screwed. I will be using some of these hover effects on our site. Perfekt for the galleries! :JOY)

  102. nel says:

    AMAZING!! GREAT! EFFECTS

  103. Omar Khan says:

    Great! The crooked picture effect was something I wanted to use but could not find a simple way of doing it and then I stumbled upon this post. Excellent effects!

    Haven’t checked on other browsers but works great on Chrome and Safari so far. Won’t bother with IE.

  104. safry says:

    thanks a lot for the sample css design. its amazing.. :)

  105. Joshua Long says:

    You’re simply the best

  106. Rahul says:

    thanks a lot for the share….

  107. fernando says:

    thank you , thank you , thank you !

  108. Claudia says:

    Thank you for these super nice effects. I just used one in my new Project :)

  109. Shariq Hashmi says:

    GrEaT WoRk……….hElpEd AlOt….:P

  110. Siddu says:

    Excellent Work..
    would have been more helpful if you attached the sample examples also…

  111. Shal says:

    This the best blog post I have seen for CSS hacks!! thanks so much!!!
    I’m going to use each and every one of these in my current project.

  112. Zhaofeng Li says:

    Oh, that’s terrific! These CSS hacks are wonderful!

  113. Awesome !! Works Perfectly

  114. Aman says:

    like it, gr8 collection…

  115. Klent says:

    i try the fade in and reflect effect but unfortunately IE8 would not able to work. what will i use to work on it?

  116. Ankh says:

    Thank you very much, I will use it!

  117. this is great:) it will help me to do my projects:) thak you:)

  118. Albin says:

    Thank you soooo much! These are some simple, but still AWESOME CSS effects!

  119. Jusa says:

    Neat! These are pretty awesome. Thnx for sharing.

  120. Arif Ullah says:

    These are all amazing! I can’t thank you enough for it! Thank you very much! :D

    One thing though. Internet Explorer sucks! I can’t get the bump transition working correctly. :(

  121. Barone says:

    Hello, what a great example of css design, thanks for the inspiration of useing css for nicely effekts whithout javascript … in german we say “hammer geil” ;-)

    best
    BARONE

  122. Great examples – gonna be using these to help tweak the new site – cheers!

  123. Warren says:

    I like the effects but not quite what i am looking for. I want a menu of either text or images and when the mouse hovers over them then some text will appear in a designated place on the page

  124. ashish says:

    these effects are really awesome i m going to use these effects on web site thx for sharing great tips.

  125. rosh says:

    great effects, you make it look so easy

  126. praveen says:

    It is very best website for study

  127. mitt says:

    hey there

  128. pikasso says:

    super effects on web site, Thank you very much

  129. Suhel Mulla says:

    thanks…..dud

  130. Jordan says:

    Good stuff, you should add a tutorial of how you did the hover image effects for the image previews of each of these tutorials.

    Looks like you lowered the opacity or something.

  131. Suresh Janapamula says:

    Very Use full stuff.. Thanks for sharing..

  132. Peter Pandey says:

    how to change background color of link title attribute?

  133. Sridhar UdayaKumar says:

    Awesome stuff… thanks for sharing

  134. madhusudhan reddy v says:

    awesome

  135. Awesome effects…thanks for sharing.. :)

  136. madhu says:

    great work… thanks for sharing..

  137. NICE EFFECTS ! FAST TO IMPLEMENT ! THANKS FOR SHARING! MORE POWER !

  138. Paul Hamann says:

    Nice effects! Very easy and fast to integrate. Thank you!

  139. That is the main point, to get as little as posssible code and also a nice clean effect.

    congratulate.

  140. Anand says:

    Great.. Thanks

Leave a Comment

Subscribe
Membership
About the Author