есть блок с изображениями. они вставлены фоном. при наведении нужно, чтобы они сдвигались на 10рх, ложился градиент и появлялся текст. вот, что требуется:
.
вот, что у меня получилось
.
картинка не хочет проявляется. прозрачность влияет только на градиент.
код:
<div class="about_pic">
<div class="about_pic-bg">
<div class="about_pic1"></div>
</div>
</div>
css:
.about_pic {
display: flex;
justify-content: space-between;
margin-top: perc(100);
}
.about_pic-bg {
width: 380px;
height: 250px;
background: #95e1d3;
}
.about_pic1 {
position: relative;
width: 380px;
height: 250px;
background: url(../img/about_us-pic1.jpg);
}
.about_pic1:hover {
content: "super team";
display: block;
position: relative;
right: 10px;
bottom: 10px;
width: 380px;
height: 250px;
background-image: linear-gradient(to bottom, #f38181 0%, #fce38a 100%);
}
при добавлении к .about_pic1:hover псевдоэлемента, получается вот такое:
. Если к этому же классу в background-image добавить адрес картинки, то они дублируются на фоне и со смещением.
Я уже замучался с этим. Подскажите, как правильно это решить? Скиньте пример, ссылку на статью или код, что - нибудь. Я никак не пойму, как это сделать.
