Hover Effect Using CSS3

In my previous article, we have seen some good css3 effects which we can use in our web pages. On hover of the elements, different effects are added for the elements, so that the pages are more interesting. Thought of sharing few more good stuffs, which may inspire you and may be helpful for you when you develop web pages. As a continuation of the previous article, we will see few hover effects with css3. As we know the power of CSS3 is enormous. All these tutorials are just an attempt to explore and exploit the power of css3 in a creative way.

Hover effects with CSS3

In this article, we will see some awesome hover effects with CSS3. With the help of css3 transitions, keyframe, we will create different type of animations and effects. In the demo, I have added different type of hover effects using CSS3. But in this article, we will see one of the demos in detail.

HTML for Hover effect example

We will use HTML tags as less as possible. Before we go to the html and css, have a look at the first demo.

In this HTML, a container with the class name ‘demos’ and img, overly divs and a content div with title, description and a read more button. For this particular example, we need two overlays. So two divs with ‘overlay’ class is added.

CSS for Hover effects

Our mark up is ready. Now the styling part of the container and the contents.

Explanation for CSS for hover effect

We have added the necessary styles to add the hover effect. The two masks in our html will have a different translation and a transform origin. We’ll set one to be aligned at the top and the other at the bottom. The content is styled in a way that it looks like as if it’s coming out as a tiny slice through the touching edges of the two masks.

We’ll make the content come out from the slot and make the masks touch at their edges, on over of the image. We are setting the transition-delay for the masks in such a way, that when we hover, the transition happens instantly. But when moving out with the mouse, the delay will be longer, as if its “waiting” for the content to move back into the slot.

Demo for the Hover effect

The similar way, we can add different hover effect to HTML elements. Hope the examples given are helpful. Try other effects on your own.