CSS3 Hover Effects

November 14, 2011

Hello guys, this time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops.

In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects.
Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

HTML Markup

This simple structure allows us to make these effects. As you can see in the code below we create a parent class view, and the contents inside. Then we create a class mask where we apply CSS3 transitions to get the hover effect. In later examples, this syntax could change slightly depending on the effect you want to apply.

CSS

In this example we are going to operate on the parameters of the border property. I also implemented the box-sizing. The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.

CSS

Using only the class mask in combination with the border-radius property will really take a beautiful hover effect.
I also used the visibility which allows the transition end to have the image clickable.