Kevin Powell - Community•9mo ago

Fix background for div on hover

Hey guys, You can see in screenshot when I hover on a card the background is getting disturbed. I need it to have same style background (dark one like other two) before and after hover, can any one help me Thank you. https://codepen.io/Moksha-Nirugutti/pen/QWPOOvM

5 Replies

MarkBoots•9mo ago

the transform on the .card:hover is creating a new stacking context that prevents deeper layers (the peudos') to go behind it. What you can do is add

.card {
  transform-style: preserve-3d;
}
.card::before, .card::after{
  transform: translateZ(-1px);
  /* z-index: -1; not needed anymore */
}

.card {
  transform-style: preserve-3d;
}
.card::before, .card::after{
  transform: translateZ(-1px);
  /* z-index: -1; not needed anymore */
}

MarkBoots•9mo ago

btw, you don't need to have 2 pseudos. for the gradient border you could use a background gradient clipped to the border-box on the main element that way the border-radius would be more exact https://codepen.io/MarkBoots/pen/MWROQPm

althepal78•9mo ago

this is very pretty 🙂

thatsmokshaniruguttiOP•9mo ago

@MarkBoots thanks Mark

Gaming

Programming

Fix background for div on hover