5 Cool And Awesome Effect On Image Using CSS2 And CSS3

You know that CSS can do anything that you want to do in JQuery and now after release of CSS3, you can do even more then JQuery. Now its time to make your website or Blog more stylish then what is it. You know that images attract peoples so you can give some time to make your all blog image in awesome view.

Just you have to make then move in awesome way that will catch your visitor then go through you all images and that can also increse your SEO heat map. So in this tutorial, you will learn how to add cool effects on image hover using CSS3 transitions. You can also combine these effects. By using these effects, your Blog looks more good. This effect attract readers to visit again to your Blog.

Features:

1.) Pur CSS Codes.
2.) CSS2.0 And CSS3 Used.
3.) No External Image Or Font Used.
4.) Awesome In Effect.
5.) Can Add On Any Class Or DIV.

Here are 5 best animation effects made by some CSS codes that you will love to see them live and also on your blog.

1.) Change Border Color On Image Hover:

Check out the below code and add it anywhere.

img {
border:5px solid #0000ff;
}
img:hover {
border:5px solid #00ff00;
}

You Can Also Change Border Colors Simply By Replacing Blue And Green Color Codes With Other Color Codes.

2.) Change Opacity On Image Hover:

Check out the below code and add it anywhere.

img:hover {
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
}

You Can Change Image Opacity From 0.1 To 1.0

3.) Rotate Image By 360 Degree On Image Hover:

Check out the below code and add it anywhere.

img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
img:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

You Can Also Change Rotation Degree By Changing 360deg.

4.) Scale And Spin Image On Image Hover:

Check out the below code and add it anywhere.

img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
img:hover {
-webkit-transform: scale(1.2) rotate(1080deg);
-moz-transform: scale(1.2) rotate(1080deg);
-o-transform: scale(1.2) rotate(1080deg);
-ms-transform: scale(1.2) rotate(1080deg);
transform: scale(1.2) rotate(1080deg);
}

You Can Increase Scale While Spining By Changing 1.2 To 1.5 Or Greater Value Then1.2.

5.) Zoom Image On Image Hover:

Check out the below code and add it anywhere.

img:hover
{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
zoom: 125%;
}

You Can Increase Zoom Percentage By Changing 125%

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share alot more about coding and make it easy for you. If you liked it then share it and be with us to get next awesome widget. If you have any problem then feel free to ask us. We will help you with what we can or have.