how to show hover effect on a image where i hover my mouse

Question

i have multiple images, on hover on particular image i want to apply on that image only, it should not effect on other image.

---

More Explanation: In this example( http://codepen.io/anon/pen/AnsqI ), suppose i have multiple images & want to apply the certain effect on only on that image where i hove my mouse.

---

I am using class attribute...

 <script>
        $(function() { 
 //For grid view hover effect
        $('.grid_content').hide()
        $('.grid_container').hover(  
                // Over
                        function() {
                            $('.grid_content').fadeIn();
                        }
                ,
                        // Out
                                function() {
                                    $('.grid_content').fadeOut();
                                }
                        );
                        //--js for grid view hover effect ends here
        });

    </script>  

Something i have to apply like $this , i tried like( $this.$('.grid_content').fadeOut(); )but it did not work.

Somebody please help me.

Answer 1

Use this:

$('.container').hover(function(){
  $('.content',this).fadeToggle();
});

Check this Demo http://codepen.io/anon/pen/BxbID

Answer 2

You could consider using CSS and the opacity attribute (or display ). You could progressively enhance the hover effect with CSS3's transition property as well. There isn't necessarily a need for JS here, and I only added five lines of CSS (unprefixed) to achieve the same effect.

 .content { width: 100%; height: 100%; background: rgb(255,255,255,0.9); padding: 5px 15px 10px 15px; box-sizing: border-box; opacity: 0; transition: opacity .2s linear; /* CSS3 progressive enhancement */ } .content:hover { opacity: 1; } 

Depending on how you organize your HTML, you may need to make modifications, but the concept is the same.

Check out the demo: http://jsfiddle.net/NeEuP/1/

Answer 3

There are 2 ways to do this. You can either reference it using the this javascript keyword and surrounding it in a jQuery function:

$('.grid_container').hover(function(){
  $(this).fadeIn();
, function(){
   $(this).fadeOut();
});

Or you can:

$('.grid_container').hover(function(e){
   $(e.currentTarget).fadeIn();
, function(e){
   $(e.currentTarget)$(this).fadeOut();
});

... basically you're getting element through the event object. I personally prefer this method, because it's more flexible it doesn't depend on the actual scope (this depends on scope).