Наложение иконки на изображение

137

20 января 2021, 15:50

Крч, дело такое, верстаю себе лендинг, и тут откуда не возьмись появился в..... К делу, надо чтоб при :hover на картинку, на ней появлялась иконка и затемнение, это я сделать могу легко и за 30 секунд, дело в другом, как поместить иконку на картинку с помощью грид и ещё чего-нить, но не посредством маргинов и posA.

Answer 1

Оно?

.wrapper { 
    display: inline-block; 
    position: relative; 
    max-width: 300px; 
} 
 
.bg{ 
    display: none; 
} 
 
.wrapper:hover .bg { 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	position: absolute; 
	top:0; 
	right:0; 
	left: 0; 
	bottom: 0; 
	background: rgba(0,0,0,0.6) 
} 
 
.icon{ 
	color: #fff; 
} 
   
img { 
    max-width: 100%; 
}

<div class="wrapper">  
    <img src="https://kartinki.detki.today/wp-content/uploads/2017/07/kartinka-dlya-detey-lev-1150x863.jpg"> 
	<div class="bg"> 
	 	<div class="icon">иконка</div> 
	</div> 
</div>