5 Cool Effect On Image Using CSS3

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 Again To Your Blog. Follow These Steps.

Change Border Color On Image Hover

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.

Change Opacity On Image Hover

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

You Can Change Image Opacity From 0.1 To 1.0 

Rotate Image By 360 Degree On Image Hover

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.

Scale And Spin Image On Image Hover

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.

Zoom Image On Image Hover

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%

How To Add Above Effect To Blogger

1. Login To Blogger Account.
2. Click Blog Title → Template → Edit HTML.
3. Click Proceed Button.
4. Search Following Code Using Ctrl + F.

]]></b:skin>

5. Copy Any Effect Code Above Before This Code.

Categories: css