Like Us on Facebook

Image Overlay Effects on Mouse Hover using CSS3 Transitions

Hello friends Today we are going to share HTML and CSS code for creating a Overlay effect on image hover. Overlay on mouse hover can be created using CSS3 transitions. This tutorial is very easy and you just have to follow simple steps. So lets start
 
                                      

                                    
 

The script contains three folders  with HTML file.

css // Style Folder

js // Javascript Folder

img // Images Folder

index.html // Main index file show data
 

 

  JS Code
<script>
    $(document).ready(function(){
        if (Modernizr.touch) {
            // show the close overlay button
            $(".close-overlay").removeClass("hidden");
            // handle the adding of hover class when clicked
            $(".img").click(function(e){
                if (!$(this).hasClass("hover")) {
                    $(this).addClass("hover");
                }
            });
            // handle the closing of the overlay
            $(".close-overlay").click(function(e){
                e.preventDefault();
                e.stopPropagation();
                if ($(this).closest(".img").hasClass("hover")) {
                    $(this).closest(".img").removeClass("hover");
                }
            });
        } else {
            // handle the mouseenter functionality
            $(".img").mouseenter(function(){
                $(this).addClass("hover");
            })
            // handle the mouseleave functionality
            .mouseleave(function(){
                $(this).removeClass("hover");
            });
        }
    });
</script>
 


HTML Code

<div id="effect-1" class="effects clearfix">
            <div class="img">

                <img src="img/sports/1.jpg" alt="">
                <div class="overlay">
                     <a href="#" class="expand">+</a>
                    
                </div>
            </div>

            <div class="img">
                <img src="img/sports/2.jpg" alt="">
                <div class="overlay">
                     <a href="#" class="expand">+</a>
                    <a class="close-overlay hidden">x</a>
                </div>
            </div>

            <div class="img">
               <img src="img/sports/3.jpg" alt="">
                 <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <a class="close-overlay hidden">x</a>
                </div>
            </div>

            <div class="img">
                <img src="img/sports/4.jpg" alt="">
                 <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <a class="close-overlay hidden">x</a>
                </div>
            </div>
        </div>


 

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 1 )

raj kumar:
Hello, Thanks for this tutorial, is it possible to change mouseover to onclick. Thanks

    Leave a comment..

    Click to login.