При наведении на фото при помощи opacity сделан фон, как сделать иконки (которые находятся на этом фоне) с прозрачной областью вокруг них(т е видно кусочки фото)?
<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;
}
Средний