Monday, August 25, 2014

Best CSS3 Hover Effect

Best CSS3 Hover Effect

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