NFT preview card component (Flexbox)

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