Image hover effect using Jquery and CSS - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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. 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon