Image hover effect using Jquery and CSS

In this article I am going to explain how to applying hover effect to image/images using jquery and css.

Description:

To apply image hover effect using Jquery and CSS. On mouse hover its fades the image/images.

Implementation:

Add the below given style to stylesheet or add it before closing </head> tag.
    <style>
        table img {
        width:250px;
        }
        span.roll {
    background:url(images/mag.png) center center no-repeat #000;
    height: 141px;
    position: absolute;
    width: 250px;
    z-index: 10;           
            -webkit-box-shadow: 0px 0px 4px #000;
            -moz-box-shadow: 0px 0px 4px  #000;
            box-shadow: 0px 0px 4px  #000;
}
span.rollover {
            opacity: 1;
            -o-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -webkit-transition: -webkit-transform 1s;
            background:url(images/mag.png) center center no-repeat #000;
            cursor: pointer;
            height: 141px;
            width: 250px;
            position: absolute;
            z-index: 10;
            opacity: 0;
}
span.rollover:hover {
            opacity: .7;
            -o-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -webkit-transition: -webkit-transform 1s;
            -webkit-box-shadow: 0px 0px 4px #000;
            -moz-box-shadow: 0px 0px 4px #000;
            box-shadow: 0px 0px 4px #000;
}
    </style>

 Add the Jquery  between head tag of page.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<
script>
        $(function () {
            $(".roll").css("opacity", "0");
            $(".roll").hover(function () {
                $(this).stop().animate({
                    opacity: .7
                }, "slow");
            },
            function () {
                $(this).stop().animate({
                    opacity: 0
                }, "slow");
            });
        });
    </script>

Complete HTML markup of webpage
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <style>
        table img {
        width:250px;
        }
        span.roll {
    background:url(images/mag.png) center center no-repeat #000;
    height: 141px;
    position: absolute;
    width: 250px;
    z-index: 10;           
            -webkit-box-shadow: 0px 0px 4px #000;
            -moz-box-shadow: 0px 0px 4px  #000;
            box-shadow: 0px 0px 4px  #000;
}

span.rollover {
            opacity: 1;
            -o-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -webkit-transition: -webkit-transform 1s;
            background:url(images/mag.png) center center no-repeat #000;
            cursor: pointer;
            height: 141px;
            width: 250px;
            position: absolute;
            z-index: 10;
            opacity: 0;
}

span.rollover:hover {
            opacity: .7;
            -o-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -webkit-transition: -webkit-transform 1s;
            -webkit-box-shadow: 0px 0px 4px #000;
            -moz-box-shadow: 0px 0px 4px #000;
            box-shadow: 0px 0px 4px #000;
}
    </style>
    <script>
        $(function () {
            $(".roll").css("opacity", "0");
            $(".roll").hover(function () {
                $(this).stop().animate({
                    opacity: .7
                }, "slow");
            },
            function () {
                $(this).stop().animate({
                    opacity: 0
                }, "slow");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td><span class="roll" ></span><img src="images/img.jpg" /></td>
             <td></td>
             <td><span class="roll" ></span><img src="images/img1.jpg" /></td>
             <td></td>
             <td><span class="roll" ></span><img src="images/img2.jpg" /></td>
            <td></td>
             <td><span class="roll" ></span><img src="images/img3.jpg" /></td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>


 Demo:
Image hover effect using Jquery and CSS

 In this article we have learn how to add image hover effect using Jquery and CSS in asp.net . I hope you enjoyed this article. 

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget