CODEWITHSUNDEEP
jqueryhtmlcsshovergrayscale
MRT46
MRT46

Reputation: 45

Turn other images greyscale when one title / image is hovered

I am designing an overview page for a list of projects. I have a text list of projects on the page and thumbnail images of that list. They all appear on the same page. My goal is to get all other thumbnails in greyscale when one title or image is hovered.


Here is a working fiddle for my question

Link to fiddle: http://jsfiddle.net/ka2Xs/6/

So my goal is:
1 - When you hover on "Name 1" it turns red. But hovering on "Name 1" should also turn all images into greyscale except the first image.

And vice versa:
2 - Hover the first image should turn all other images into greyscale and should turn "Name 1" into red.

The same action for the other images and links of course. I hope it is clear like this.

img explanation: http://img19.myimg.de/10f3cc.jpg

Upvotes: 0

Views: 622

Answers (2)

Pratik
Pratik

Reputation: 1138

I think your question was on how to link the hovering on your link to do the corresponding change in selection for your images. Its pretty easy with jquery:

$('#sub-menu').find('a').hover(function(){
    var index =$('a').index($(this)); // this will get you the index of the link that is hovered on
    $('img').eq(index).css('opacity', 1); // this find find the image at the corresponding index and change its opacity to 1.
});

you can have the opacity of the rest of the images to be 0.1 so that this appears highlighted. also write the code for hover out.

Upvotes: 0

kunalbhat
kunalbhat

Reputation: 1719

Hopefully I understand you correctly, without a working Fiddle on your end, it's hard to visualize all the requirements — here's a quick example for most of your request, using the jQuery :not selector, and the CSS filter property:

Working example here

HTML

<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>

CSS

.thumb {
    background: maroon;
    display: inline-block;
    height: 200px;
    width: 200px;
}

.thumb.hover {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray; /* IE 6-9 */
}

jQuery

$('.thumb').on('mouseover', function(){
    $('.thumb').not($(this)).addClass('hover');
});

$('.thumb').on('mouseout', function(){
    $('.thumb').not($(this)).removeClass('hover');
});

Upvotes: 1

Related Questions