Kevin Powell - Community•2y ago

Hovereffect with opacity on gallery

Hi, I'd like to make a hovereffect on a gallery where if you hover on the whole gallery, the opacity lowers except for the image you are hovering on within that gallery. Actually something like this: https://secretlab.eu/nl/products/magnus-metal-desk?sku=MagBdl15S-C9 (scroll a little down, about 60% on the page is that gallery) Here is my codepen: https://codepen.io/axl-prudhomme/pen/BaPYJjq?editors=1100 I hope I explained it well.

7 Replies

Mannix•2y ago

add active class to hovered img and then do this

.square-gallery:hover .grid-item:not(.active) {
    filter: opacity(50%);
}

.square-gallery:hover .grid-item:not(.active) {
    filter: opacity(50%);
}

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋OP•2y ago

do you mean that only the hovered image should have the class active?

Mannix•2y ago

yes

MarkBoots•2y ago

no need for the .active class. just say :not(:hover)

.square-gallery:hover .grid-item:not(:hover) {
  filter: opacity(50%);
}

.square-gallery:hover .grid-item:not(:hover) {
  filter: opacity(50%);
}

Mannix•2y ago

oh yeah lol sometimes the easiest solutions skip my mind 🤣

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋OP•2y ago

oh wow, i really need to deepdive in the :not(), i don't really understand it yet thanks!

MarkBoots•2y ago

the only disadvantage is that if the gallery is hovered without actually hovering an item (for example with gaps or margins), it will give all items the opacity. with the has selector (currently only in chrome) you can do this

.square-gallery:has(.grid-item:hover) > .grid-item:not(:hover){
  filter: opactiy(50%);
}

.square-gallery:has(.grid-item:hover) > .grid-item:not(:hover){
  filter: opactiy(50%);
}

with this it only acts if the the gallery really has an item that is hovered

Gaming

Programming

Hovereffect with opacity on gallery