@Emir-SezerSubmitted almost 2 years ago
It seems like everything is fine, but I had a hard time giving the hover eye feature to my picture and I gave up, I'm not good at those things, I need to go on
šš
It seems like everything is fine, but I had a hard time giving the hover eye feature to my picture and I gave up, I'm not good at those things, I need to go on
šš
Hi, next time don't give up, it's better to sit once again, but find a way :) In short, I have slightly supplemented your code for an example so that you can figure it out a little. I understand that there is most likely a better version of this hover effect, but still...
HTML
<div class="nft-main-img">
<a href="#"><img class="main-img" src="./images/image-equilibrium.jpg" alt="New's Nft Equilibrium Image"/></a>
</div>
CSS
.nft-main-img a {
position: relative;
}
.nft-main-img a::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--cyan);
opacity: 0;
transition: opacity .3s ease;
}
.nft-main-img a::before{
content: url("images/icon-view.svg");
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
opacity: 0;
transition: opacity .3s ease;
}
.nft-main-img a:hover::after{
opacity: .3;
}
.nft-main-img a:hover::before{
opacity: 1;
}
Good luck to you