Не срабатывает 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%);
}
то, что закомментированно - работает. Подскажите, где ошибка или как правильно это сделать
