.

[Freebie] 9 Free Hover Effects with CSS3 Transitions

3 images showing an example of the hovers offered in this freebie

This image hover animation set is created with an intend to offer users, like me, smooth animation for their designs. As you would see in the live preview, the set has 2 overlay style and 3 buttons animations that are described in details below to guide you for ease of application. This is my first set of freebie, so I will appreciate your feedback, guys. Hope you like them.

Download Now

 

Overlay Example 1 :

It’s a rectangle shape which separated to 2 triangles with different colors.

<li class="imgHover triangleScale style1">
 <img src="img.jpg"/>
</li>
<style>
.imgHover.triangleScale.style1:before, .imgHover.triangleScale.style1:after {
 border-width: 250px; /* Image Width */
}
</style>

 

Overlay Example 2 :

It’s the same rectangle shape, but shifted from the side by 20px.

<li class="imgHover triangleScale style2">
 <img src="img.jpg"/>
</li>
<style>
.imgHover.triangleScale.style2:before, .imgHover.triangleScale.style2:after {
 border-width: 210px; /* Image Width - Shifted space * 2 */
}
.imgHover.triangleScale.style2:hover:before {
 left: 20px;
 top: 20px;
}
.imgHover.triangleScale.style2:hover:after {
 right: 20px;
 bottom: 20px;
}
</style>

 

Button Example 1 :

This button starts from the upper right corner to the center of the image.

<li class="imgHover">
 <img src="img.jpg"/>
 <a href="#" class="cornerLink"><span class="cr-icon-link"></span></a>
</li>

 

Button Example 2 :

This button will scale from 0 to 1 in the center of the image.

<li class="imgHover">
 <img src="img.jpg"/>
 <a href="#" class="scaleLink"><span class="cr-icon-link"></span></a>
</li>

 

Button Example 3 :

This is 2 buttons triangle shaped, in 2 opposite corner.

<li class="imgHover">
 <img src="img.jpg"/>
 <a href="#" class="topLeftLink"><span class="cr-icon-link"></span></a>
 <a href="#" class="bottomRightLink"><span class="cr-icon-search"></span></a>
</li>

Want to increase your sales?, Follow these steps and get your business a step further
Check Now

Want to see your business Elevated?

Hire Us

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match