Doubt in the image gallery

Asked

Viewed 74 times

3

I want to do this kind of effect in my image gallery, when I hover over some image, it simply highlights the image and the others darken. Follows the model: Model. If possible wanted via CSS.

html css

  • If your doubt is how to do via CSS, da para fazer usando o seletor :Hover.

1 answer

4


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

For the example on 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(s) class(s) at the same depth level of tags;
  • .hover() is the event of passing the cursor over the element, and asks for two callbacks: an entry into the div and an exit;
  • .fadeTo() creates the opacity effect (in this case 0.6 for input and 1 for output);

Here is a functional example.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.