Frontend Mentor | milley's profile

@Emir-Sezer

Submitted 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

😊😊

NFT preview card component (Flexbox)

milley• 70

@milley69

Posted almost 2 years ago

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

Marked as helpful

milley

All comments

NFT preview card component (Flexbox)