Doubt in the image gallery

Question

Doubt in the image gallery

Navigation

#1 by (4 votes)

3

I want to do this kind of effect in my image gallery, when hovering over some image, it simply highlights the image and the other darks. Here's the template: Template . If possible I wanted via CSS.

html css

asked by anonymous 19.11.2015 / 21:11

1 answer

How to manipulate properties of instances of a class that is in a ListT? Field that only allows an exact amount of data

score 4 · Accepted Answer

Just because of CSS does not give because the opacity applies to all elements belonging to the carousel, then it has to be by JS itself.

For example in the link, using jQuery:

$('.products_container .product_holder').hover(
    function() {
        $(this).siblings().fadeTo("fast", 0.6);
    }, function() {
        $(this).siblings().fadeTo("fast", 1);
    }
);

Explaining:

$(this).siblings() selects all elements with the same class (s) at the same depth level of < in> tags ;
.hover() is the event of hovering over the element, and asks for two callbacks : one input to div and one to output;
.fadeTo() creates the opacity effect (in this case, 0.6 for input and 1 for output);

Here is a working example .