Изменение background-position-x на: hover - PullRequest
Новая
       14

Изменение background-position-x на: hover

0 голосов
/ 04 декабря 2018

Я пытаюсь получить небольшую анимацию при наведении, перемещая фоновое изображение по оси X.Тем не менее, я не могу найти, как захватить элемент: hover.У кого-нибудь есть идеи, что не так?Действительно ли селектор ниже действителен?

Спасибо за помощь 

 div.card:hover .cardbg {

}


.card {
border-radius:15px;
border:none;
height: 280px;
position: relative;
background: linear-gradient(to bottom right,#ffec99 0,#ffb549 100%);
z-index: -1;
font-family: 'Arial';
}

.cardbg {
	width: 100%;
	height: 100%;
	background-image: url('images/atom-original.svg');
	opacity: 0.2;
	background-size: cover;
	background-repeat: no-repeat;
	background-position-x: 100px;
	transition: .2s ease all;
	position: absolute;
  top: 0;
  left: 0;
}

div.card:hover .cardbg {
background-position-x: 10px;
  background-color: red; 
}
<div class="card">
<div class="cardbg">
</div>

</div>

1 Ответ

0 голосов
/ 04 декабря 2018

Попробуйте удалить z-index: -1 из класса .card.Это сработало для меня.

...