Today I had collect some hover effects for you. I think it will make your site look more awesome and attractive. Some have been featured previously, otherwise enjoy!
hover.css
hover.css is a collection of CSS3 hover effects that can be easily applied to your own website’s elements, such as buttons, logos and featured images.
DownloadDemo |
CSS Button Hover Effects
The idea was to use CSS in a way to make buttons more fun, or interesting at least, and I accomplished this in a few ways.
Download Demo |
SIMPLE ICON HOVER EFFECTS
The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.
Download Demo |
Simple animated hover effect for images using CSS3 and HTML
using CSS3 to display a code using animated effects. In the first example we present a product image and its title. On hover state the image will be darkened by semi-transparent black layer and from the top will appear the "View" button. Please see this example on live demo
View CodeDemo |
Image Overlay Hover Effects
Image overlay hover effects with CSS3 transitions are a great way to add some nice interactivity on your site. In the old days, a little pointer cursor would do the trick for indicating to the user that an image was clickable to view more information.
DownloadDemo |
SVG Border Hover Effect
Great effect when you put the mouse over on the text and the border will appear around the text . That's make sense.
Demo |
Animated Envelope
Hover over the envelope to make it open and reveal contact information. Manipulates the transition delay upon hover in order to animate in the correct order.
Demo |
Shape Hover Effect with SVG
The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover.
DownloadDemo |