Не срабатывает :hover:before?

Question

[Nick Krogan]

Не срабатывает hover вместе с before/after. не пойму почему. если просто ховер - все работает. надо чтобы при наведении не только картинка смещалась, но и был градиент, текст в два слова и иконка.

<div class="about_pic">
  <div class="about_pic1">
	<img src="img/about_us-pic1.jpg" alt="Picture1">
  </div>
  <div class="about_pic2">
	<img src="img/about_us-pic2.jpg" alt="Picture2">
  </div>
  <div class="about_pic3">
	<img src="img/about_us-pic3.jpg" alt="Picture3">
  </div>
</div>

.about_pic {
	display: flex;
	justify-content: space-between;
	margin-top: perc(100);
}

.about_pic1,
.about_pic2,
.about_pic3 {
	position: relative;
	width: 380px;
	height: 250px;
	background: #95e1d3;
}

.about_pic img {
	width: 380px;
	height: 250px;
	
}

// .about_pic img:hover {
// 	position: absolute;
// 	width: 380px;
// 	height: 250px;
// 	right: 10px;
// 	bottom: 10px;
//  background: linear-gradient(to top, rgba(252, 227, 138, 0.81) 0%, rgba(243, 129, 129, 0.81) 100%);
// }

.about_pic img:before:hover {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(252, 227, 138, 0.81) 0%, rgba(243, 129, 129, 0.81) 100%);
}

то, что закомментированно - работает. Подскажите, где ошибка или как правильно это сделать

Answer 1

[HamSter]

img:before

У тега img не может быть псевдоэлементов!

Comments

[Nick Krogan]

блин, забыл. благодарю!

Answer 2

[sergey]

необходимо елемент : hover: before