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

  • Jon

    This is great, thanks!

    • amar

      nice work….

  • http://gregbabula.info Greg Babula

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

  • http://marielydelrey.com Mariely

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

  • http://www.webdesigncompanyboston.com Ronnie Saini Design

    loved it, thanks for sharing!

  • http://www.backgroundlabs.com Eric

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

  • Jess

    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.

  • http://www.departable.com Kyle

    great stuff! anything to eliminate bulky javascript is welcome.

  • Gabriel Nascimento

    Amazing!!!!

    Congrats my friend…

  • http://www.google.com sighquotetick

    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 :)

  • http://ahmaddzidan.blogspot.com ahmad

    thats great, thanks…
    all amazing….

  • http://www.rusdigi.org Ma3oBblu

    thank, this great!

  • Char

    I love it.. !

  • DonW

    Thanks, I will use some of these.

    The last 2 don’t work in IE8.

  • Ramkumaran

    very useful tips..thanks for sharing..great

  • http://www.moonthemes.com/ Moon Themes

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

  • http://www.eastdevonit.co.uk Dan

    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

  • http://besselink.eu Ben

    Crooked Photo doesn’t work in IE9.

  • http://creashit.com Creashit Inspiration

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

  • http://www.dango-no-sekai.com Knoobie

    Love it, really nice! Thanks a lot

  • http://www.webwirbel.de Elke

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

  • http://peshir.nl/ peSHIr

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

  • http://tookooldoggies.blogspot.com Elena

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

  • http://a1daily.com Kyson Kane

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

  • http://www.blogotechblog.com Lalir

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

  • http://www.torbalscales.com ddeja

    Well done!

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

    Cheers.

  • http://www.claudia-liersch.de Claudia

    Thanx! Fine code – cool effects!

  • KyawThura

    Awesome!

  • billboc

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

  • billboc

    PS: i hate IE

  • http://www.inbit.si Gregor Colnik

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

  • http://www.mainual.com Mainual

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

  • http://www.wpexplorer.com WPExplorer

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

  • http://www.cukri.com/ Cukri

    Thanks! This is great! :)

  • http://www.mpf.hk 強積金

    Awesome CSS to MPF

  • http://www.boraacemi.com Bora

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

  • http://rolling-webdesign.com Theo

    Great examples!

  • http://emoneychat.com/ sanjananb

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

  • http://dailynerd.nl Vasilis

    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.

  • http://mannaio.altervista.org/ Tommaso

    fantastic resource, i will use for my next project!

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

  • francis austria

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

  • http://www.indotrance.com amna

    Thank you verymuch :D

  • http://hellonemo.com Hellonemo

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

  • http://www.xtremedigitals.in Mohit

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

  • http://www.demo.demo demo

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

  • http://www.paulund.co.uk paul

    Thanks nice tutorial and examples.

  • NiceComment

    My nice comment!

  • Oren

    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 :)

  • fowziey

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

  • http://pensilendy.blogspot.com endy

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

  • http://www.amisi.com.ar sergio

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

  • http://www.abweb.com.mx Álvaro

    thanks, these examples are cool,

  • http://www.alphabit-ua.com/ Serge

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

  • http://www.ecentury.co.uk Birmingham Web Design

    Really nice examples

    Thanks, used these in a few sites now

    Adam

  • sakeri

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

  • Robin Whelan

    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

  • vikko

    nice professional effects, will be using it.

  • http://sweetcharm.net/forums/index.php Clover

    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 :/

  • http://toekneeabc123.com/ John Sullivan

    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!

  • Sapna

    really that’s very nice

  • http://www.mobile-web-designs.net Tork

    Great stuff!
    Thanks for sharing.

  • http://www.superwebsitedesign.com Kersitn

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

  • http://www.mlangella.com/blog Manuela

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

    Hope one day to give favour back :)

  • Masoud

    Amazing!!!
    These are really great!!!

    Thank you for this post

  • Nevil

    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

  • Shijith

    Great job man …

  • http://iaminimitable.tumblr.com Minerva

    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

  • http://catatanpilihan.wordpress.com Lidya

    verynice
    thank you. .
    :)

  • http://tberthold.com Tommy B

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

  • http://www.xhtmlteam.com XHTMLTEAM

    Awesome!! Thanks for the post.

  • http://www.easywebready.com MikeB

    A very nice approach in CSS design.

  • Oren

    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?

  • Fernando

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

  • http://www.oliphant-services.co.uk Lisa Firth

    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.

  • http://blog.loiy.net Loiy Blog

    It’s really cool, thanks for sharing

  • http://www.clubinformatico.org Live

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

  • http://www.nescschool.com batigo

    Crooked Photo CSS is cool !….

  • http://www.nescschool.com batigo

    Crooked Photo CSS is cool !…

  • Tosin html

    really nice hovers,good for celebrity sites

  • http://universalyellowkeys.com Calem

    Absolutely loved this! Thanks so much!

  • http://coolest-things.com Coolest Things Blog

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

  • http://www.shibby.co.il Shibby

    This is amazing.
    thank you very much for this!

  • Arman

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

  • Bogdan

    thank you , thank you , thank you !

  • http://www.iconinfos.com website designing in chennai

    Nice Work. Bumb Up is really good

  • http://www.evangelistjohnallen.co.cc John Allen

    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.

  • http://www.relago.hr Tomislav

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

  • Keval

    Simply cool work guys.

  • http://creativebrio.in Mohit

    wooooooooo. that’a a great work

  • Charlotte

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

  • http://www.thewholeworldsmileswithyou.com Dr Caz Rogers

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

  • jdiid

    This is really awesome! straight to my bookmarks :)

  • http://www.thisnext.com/item/4FC8EDF2/DFC14228/fine-art-drawings?share=1 art drawing techniques

    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!

  • http://www.ysapak.com fysisoft

    Thanks a lot for sharing it

  • Rex

    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

  • Lei

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

  • http://----- Sudhir

    it’s to good ……………

  • http://www.shopping.lk nuuqq

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

    Thanks in Advance

  • http://whiteskyproject.com Lei

    Okay, finally got Bump Up to work. Thanks!

  • jaczjill

    superb..! really cool.. thanks!

  • http://iamneil.co.cc Neiljun

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

    looking forward to more tuts :))

  • http://Enteryourwebsite... sumitdadhich

    mst hai bhai

  • http://sunandturtle.blogspot.com John

    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)

  • nel

    AMAZING!! GREAT! EFFECTS

  • Omar Khan

    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.

  • safry

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

  • http://www.joshualong.co.uk Joshua Long

    You’re simply the best

  • http://www.bollywoodnewsgossip.com Rahul

    thanks a lot for the share….

  • http://www.peru-web.com fernando

    thank you , thank you , thank you !

  • http://vintage-webstudio.com Claudia

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

  • Shariq Hashmi

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

  • Siddu

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

  • http://www.freekingkong.com.au Shal

    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.

  • Zhaofeng Li

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

  • http://www.geekdashboard.com amar@geekdashboard

    Awesome !! Works Perfectly

  • Aman

    like it, gr8 collection…

  • http://localhost/WEBSITE/htmlcode Klent

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

  • http://photocratie.fr Ankh

    Thank you very much, I will use it!

  • http://mozilla claire alcayde

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

  • http://pralbin.se Albin

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

  • Jusa

    Neat! These are pretty awesome. Thnx for sharing.

  • Arif Ullah

    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. :(

  • Barone

    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

  • http://www.websitedoctor.com/ Alastair McDermott

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

  • http://www.africanhoopoetours.com/ Warren

    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

  • http://coders-blog.com/ ashish

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

  • rosh

    great effects, you make it look so easy

  • praveen

    It is very best website for study

  • mitt

    hey there

  • http://webis.org.ua/ pikasso

    super effects on web site, Thank you very much

  • Suhel Mulla

    thanks…..dud

  • Jordan

    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.

  • Suresh Janapamula

    Very Use full stuff.. Thanks for sharing..

  • http://www.jogbani.co.in Peter Pandey

    how to change background color of link title attribute?

  • Sridhar UdayaKumar

    Awesome stuff… thanks for sharing

  • madhusudhan reddy v

    awesome

  • http://designshack.net/?p=19746 madhusudhan reddy v

    awesome :)thank u

  • http://black-and-whitephotos.blogspot.com Patil Makarand

    Awesome effects…thanks for sharing.. :)

  • madhu

    great work… thanks for sharing..

  • http://www.facebook.com/kazmedina Mark Kaz Medina

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

  • Paul Hamann

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

  • http://www.comma-it.com izdelava strani

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

    congratulate.

  • Anand

    Great.. Thanks

Subscribe

Membership
About the Author