Javascript/Jquery image hover effect

Question

Hi im try to do an image hover effect for a webpage, what i need help is when i hover on one image i want the other images to change there opacity(fadeout a small but), so the hovered image grabs the users attention. Any help at all is welcome.

Thanks

Answer 1

Hover on current image:

$('.class/#id').on('mouseover', function() {
    $(this).fadeTo('slow', 0.5);
});

Hover off current image:

$('.class/#id').on('mouseout', function() {
    $(this).fadeTo('slow', 1.0);
});

Hover on current image but fade other images:

$('.class/#id').on('mouseout', function() {
    $('img').fadeTo('slow', 0.5);
    $(this).fadeTo('fast', 1.0);
});

Hover off current image but fade other images:

$('.class/#id').on('mouseover', function() {
    $('img').fadeTo('slow', 1.0);
    $(this).fadeTo('fast', 1.0);
});

Answer 2

I'd use something like:

$('img').mouseover(function(){

    $('img').fadeTo("slow", 0.5);
    $(this).fadeTo("slow", 1);

});

Answer 3

Why don't you start off with them all faded in the first place. Then when you hover over the element make it's opacity higher and it will stand out.

Your desired effect may not make the image stand out as much because the user will be focused on the image they are hovering over anyway. I recommend you try both my suggestion and some other code here to demo both & see which best achieves the goal you wish to reach.

You can achieve this with pure CSS or JavaScript & jQuery if you like.

Here is a pure CSS example.

<div class="nav">
<a href="somefile.html"><img src'image1.png'/></a>
<a href="somefile.html"><img src'image1.png'/></a>
</div>
<style type="text/css">
.nav a img {opacity:0.5;}
.nav a:hover img {opacity:1;}
</style>