Нужна помощь от опытных?

Question

[Nick Krogan]

есть блок с изображениями. они вставлены фоном. при наведении нужно, чтобы они сдвигались на 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 добавить адрес картинки, то они дублируются на фоне и со смещением.
Я уже замучался с этим. Подскажите, как правильно это решить? Скиньте пример, ссылку на статью или код, что - нибудь. Я никак не пойму, как это сделать.

Answer 1

[Андрей Б.]

https://jsfiddle.net/zyLegw2z/1/
или так еще https://jsfiddle.net/zyLegw2z/2/

Comments

[Nick Krogan]

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

Answer 2

[Алекс Глебов]

https://jsfiddle.net/tmknr4yv/1/

Comments

[Nick Krogan]

Спасибо!

Answer 3

[Алексей Бульба]

linear-gradient не в HEX, а rgba с opacity 0.7(уже на практике определитесь).
В background можно несколько изображений загружать, следовательно градиент + изображение в одном bacground.

Answer 4

[Олег]

https://jsfiddle.net/destroer18/bv757tsr/