Cool and Awesome Effect On Image Using CSS

In this article, I will show some effect on image hover, you can use below code in your project.

Change Border Color On Image Hover:

    <style>

    img {

border:5px solid #0000ff;

}

img:hover {

border:5px solid #00ff00;

}

    </style>

Rotate Image By 360 Degree On Image Hover

<style>

        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(50deg);

            -moz-transform: rotate(50deg);

            -o-transform: rotate(50deg);

            -ms-transform: rotate(50deg);

            transform: rotate(50deg);

        }

    </style>

Scale and Spin Image On Image Hover

<style>

        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);

        }

    </style>

Zoom Image On Image Hover

  <style>

        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%;

        }

    </style>

Change Opacity On Image Hover

<style>

        img:hover

        {

            opacity: 0.3;

            filter: alpha(opacity=30); /* For IE8 and earlier */

        }

    </style>