@AireneKVV

Как сделать иконки с прозрачным кругом вокруг них в блоке с фоном при :hover?

При наведении на фото при помощи opacity сделан фон, как сделать иконки (которые находятся на этом фоне) с прозрачной областью вокруг них(т е видно кусочки фото)?

5bed7810135b2531496234.png5bed7815bdb0a747625619.png
<body>
	<section class="portfolio">
   <a href="#" class="portfolio-item">
     <img src="img/director.jpg" alt="alt">
     <div class="portfolio-item-content">
       <img src="img/if_facebook_gray.png" alt="">
       <i class="fab fa-facebook-f"></i>
       <i class="fab fa-twitter"></i>
     </div>
   </a> 
 </section>
</body>


.portfolio{
	max-width: 300px;
}
.portfolio-item{
	position: relative;
	display: block;
}
img{
	width: 100%;
	height: 100%;
	display: block;
}
.portfolio-item-content{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.75);
	text-align: center;
	opacity: 0;
	transition: all .5s ease;
}
.portfolio-item-content:hover{
	opacity: 1;
	transform: scale(.94);
}
.portfolio-item-content i{
	color: rgba(255,255,255,.75);
	font-size: 25px;
	line-height: 25px;
	background-color: green;
	padding: 10px;
	border-radius: 50%;
	margin-top: 60%;
}
.fa{
	display: inline-block;
}
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 3
Можно попробовать еще с mix-blend-mode
https://codepen.io/corvus-007/pen/BGRvGw?editors=1000
Ответ написан
Комментировать
natojezlo
@natojezlo
напр.
вместо opacity наложите полупрозрачный background rgba(255,.255,255,0.7)
а на область иконки наоборот rgba(0,0,0,0.7)
Ответ написан
Комментировать
LenovoId
@LenovoId
I want, women not to get sick
вот так например :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы