Thomas Hardy

A Collection of CSS3 Hover Effects

I recently wrote a tutorial on how to create a CSS3 hover effect, the tutorial used CSS3 transitions, transforms and delays. The final result was an image which on hover an overlay rotated in with some text and a button fading and sliding in.

The inspiration for that article was a collection of effects I had created in my spare time to see what hover effects I could create using CSS3 only. In the end I created 25 different hover effects including my homage to the classic games tetris and snake.

View demo Download Demo

21 Comments

  1. Josip

    Nice set of effects :)

  2. Klaus

    Love these. Thanks for sharing :)

  3. Chris

    Absolutely excellent! :D

  4. Peter Sorensen

    Excellent work–Thanks for sharing!

  5. Raf

    Love them, can’t wait to use them

  6. Sten Hougaard

    Great work – guess you should also visit: http://leaverou.github.io/animatable/

    /Sten

  7. Stefan Ric

    Great work, really nice animations. I like the kitten, too!

  8. Lyju

    Super animations.

  9. Bala

    Excellent work – Love this

  10. sanaullah

    Nice……
    Thank You.

  11. Marco Berrocal

    Would like to use them but question, do they degrade ok on IE or no?

  12. Hamid

    wow. What a amazing set of effects !!! tnx

  13. SCX

    Wow… this is amazing work!!! Thumbs Up!!!

  14. Marco

    Great demo. Is there way to adapt this to a responsive layout? In my case I can’t specify width / height as you do in your tutorial.

  15. Beben Koben

    awesome \m/

  16. Shanu

    Great Thanks Dude

  17. Dan

    I am currently trying to implement one of these effects in my design, however I cannot get the text to center vertically or horizontally in the main container of my site. I edited the code and can get the transition to fill the entire container, however, I can’t get the text to work. Any help would be appreciated.

  18. ella

    great tuts! thanks!!

  19. Bucur

    Wow… this is amazing i like ten plus…

  20. Naser

    Love tetris one! Awesome!

  21. Roldan

    Thanks man, more power!

Leave a Comment