Archived topic

Fading out siblings on hover in CSS

3 replies · Started by Juan on November 26, 2021

Viewing posts 1–4 of 4

November 26, 2021 at 5:09 am #2023138

I'm trying to replicate this same effect on my website but I can't get around the fact that when the box is enlarged an opacity appears.

This is the CSS code I am using:

/*Efecto fading*/
.parent:hover > * {
  opacity: 0.5;
}

.parent:hover > *:hover {
  opacity: 1;
}

.fade-out-siblings > * {
   cursor: pointer;

  pointer-events: auto;
  transition: 300ms opacity, 300ms transform;
}

.fade-out-siblings:hover > * {
  opacity: 0.5;
  
}

.fade-out-siblings:hover > *:hover {
   transform: scale(1.1);
   opacity: 1;
}

This is my website, where I am trying to implement the

November 26, 2021 at 6:52 am #2023620

Hi there,

try adding the scale to just the inner container ie. Change this:

.fade-out-siblings:hover > *:hover {
   transform: scale(1.1);
   opacity: 1;
}

to:

.fade-out-siblings:hover > *:hover {
   opacity: 1;
}
.fade-out-siblings:hover > *:hover .gb-inside-container {
    transition: transform 0.3s ease;
    transform: scale(1.1);
}

November 27, 2021 at 4:19 pm #2026860

Works perfect!

Thanks a lot.

November 28, 2021 at 4:40 am #2027302

Glad to hear that

This archived topic is closed to new replies.

Start building better websites today.