Image Mouse Over Effect using CSS3 and jQuery - Mostlikers

02 September, 2015

Image Mouse Over Effect using CSS3 and jQuery

Image Mouse Over Effect using CSS3 and jQuery. This mouseover effect it really very attracts the visitor to see your website. it will help to create high professional web design. Learn this simple mouse effect code. For quick view have a look at a live demo.

Image Mouse Over Effect using CSS3 and jQuery


Live Demo             Download

Html & Jquery code

<html>
 <head>     
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 </head>
    <body>
        <div class="image-wrapper">
            <a href="#">
                <img alt=" Banner 02" src="laptop.jpg">
            </a>
        </div>
        <script>
            $('.image-wrapper').hover(function() {
                $(this).removeClass('hoverOut').addClass('hoverIn');
            }, function() {
                $(this).removeClass('hoverIn').addClass('hoverOut');
            });
        </script>
    </body>
</html>

CSS Code

<style>
.image-wrapper {
    width: 366px;
    height: 246px;
    background: #fff;
    overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
}

.image-wrapper a:before {
    top: -42px;
    height: 0;
    z-index: 2;
    content: "";
    width: 100%;
    display: block;
    position: absolute;
    box-shadow: 0 0 80px 5px #fff;
    -webkit-transition: top 900ms linear 0s;
    -moz-transition: top 900ms linear 0s;
    -ms-transition: top 900ms linear 0s;
    transition: top 900ms linear 0s;
}

.image-wrapper.hoverIn a:before{
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
}

.image-wrapper.hoverOut a:before {
    top: 100%;
    margin-top: 42px;
}
</style>



"We should not give up and we should not allow the problem to defeat us."
                                             
                                         - A. P. J. Abdul Kalam



Related Topics

Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)