Эффект перекатывания на css

185

13 апреля 2019, 03:40

Есть картинка на сайте и описание к ней. Нужно чтобы при наведении на это описание картинка менялась на другую, то есть что-то типа анимации было. Как это реализовать? Только учусь, не судите строго. Знаю что при наведении на картинку так делается:

a.rollover { 
  background: url(img/8.png); /* Путь к файлу с исходным рисунком  */ 
  display: block; /* Рисунок как блочный элемент */ 
  width: 375px; /* Ширина рисунка */ 
  height: 651px; /* Высота рисунка */ 
} 
 
a.rollover:hover { 
  background: url(img/9.png); /* Путь к файлу с заменяемым рисунком  */ 
}

<p><a href="#" class="rollover"></a></p>

А как сделать при наведении на текст чтобы менялись?

Answer 1

Чтобы по наведению на описание менялась картинка, надо, чтобы в разметке абзац с описанием шёл ДО блока с картинкой (при этом визуально они могут располагаться как угодно относительно друг друга):

.wrapper { 
  width: 400px; 
} 
p { 
  float: right; 
} 
.pic { 
  background-image: url('https://avatars.mds.yandex.net/get-pdb/51720/61d22c75-c500-445c-83ea-1199467ddbbb/s1200'); 
  background-size: cover; 
  width: 200px; 
  height: 150px; 
  border: 2px solid red; 
  border-radius: 10px; 
  transition: 1s; 
} 
p:hover + .pic { 
  background-image: url('https://avatars.mds.yandex.net/get-pdb/49816/82e873bb-d4f4-4864-a59d-dafee5ea8a48/s1200'); 
}

<div class="wrapper"> 
  <p> 
  Здесь описание картинки<br /> 
  Здесь описание картинки<br /> 
  Здесь описание картинки 
  </p> 
  <div class="pic"></div> 
</div>