При hover мой background отделяется

Question

Всем привет, подскажите пожалуйста

transition: transform .3s ease-in-out;
transform: skewX(-20deg);

&:hover {
  transform: translateY(-15px);
}

и когда я нажимаю на свой элемент, он меняет соответственно свое положение, но background который прописан в элементе он как бы отслаивается при этом. Если убрать transition: transform .3s ease-in-out; то все становится нормально, но соответственно мое положение элемента двигается резко.

Answer 1

За отсутствием в вопросе html и css кода, невнятно сформулированного вопроса, а по картинке, которая мало что говорит, и только ради спортивного интереса могу предположить следующую реализацию:

.nav {
  list-style: none;
  margin: 50px 0 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: center;
}

.nav li a,
.nav li a:hover {
  display: flex;
  color: gray;
  text-decoration: none;
  transform: skewX(15deg);
}

.nav li:hover a {
  color: white;
}

.link {
  flex: 0 1 auto;
  margin: 0 15px;
  padding: 1rem 2rem;
  border: 1px solid gray;
  background: white;
  color: gray;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  transform: skewX(-15deg);
  transition: all 0.5s;
}

.link:hover {
  border-left: 1px solid #c70101;
  border-right: 1px solid #c70101;
  border-top: none;
  border-bottom: none;
  background: #c70101;
  color: white;
  transform: skewX(-15deg) translate(0, -0.5rem);
}

.link::after {
  content: "";
  position: absolute;
  border: none;
  transition: inherit;
  height: 0;
  top: 100%;
  left: -1px;
  right: -1px;
  background-image: repeating-linear-gradient(to bottom, #f1f1f1, #f1f1f1 1px, #e79494 1px, #e79494 50%, #e79494 50%, #e79494 calc(100% - 1px), #da5656 calc(100% - 1px), #da5656 100%);
  transform-origin: top left;
  transform: skewX(0deg) translate(0, 0);
}

.link:hover::after {
  height: 0.5rem;
  transform: skewX(0) translate(0, 0);
}

<ul class="nav">
  <li class="link"><a href="#">Для фитнеса</a></li>
  <li class="link"><a href="#">Для бега</a></li>
  <li class="link"><a href="#">Для триатлона</a></li>
</ul>

upd:

только без градиентов есть решение?

.nav {
  list-style: none;
  margin: 50px 0 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: center;
}

.nav li a,
.nav li a:hover {
  display: flex;
  color: gray;
  text-decoration: none;
  transform: skewX(15deg);
}

.nav li:hover a {
  color: white;
}

.link {
  flex: 0 1 auto;
  margin: 0 15px;
  padding: 1rem 2rem;
  border: 1px solid gray;
  background: white;
  color: gray;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  transform: skewX(-15deg);
  transition: all 0.5s;
}

.link:hover {
  border-left: 1px solid #c70101;
  border-right: 1px solid #c70101;
  border-top: none;
  border-bottom: none;
  background: #c70101;
  color: white;
  transform: skewX(-15deg) translate(0, -0.5rem);
}

.link::after {
  content: "";
  position: absolute;
  border: none;
  transition: inherit;
  height: 0;
  top: 100%;
  left: -1px;
  right: -1px;
  background: #e79494;
  transform-origin: top left;
  transform: skewX(0deg) translate(0, 0);
}

.link:hover::after {
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #c70101;
  height: 0.5rem;
  transform: skewX(0) translate(0, 0);
}

<ul class="nav">
  <li class="link"><a href="#">Для фитнеса</a></li>
  <li class="link"><a href="#">Для бега</a></li>
  <li class="link"><a href="#">Для триатлона</a></li>
</ul>

БЛОГ НА HUSL

При hover мой background отделяется

Ответы (1 шт):