Equilibrium flex without eye

Greeting Kevin Garcia!! Congratulations for completing your challenge!, 👏👏👏 .

I take a look at you code, and You're actually so close to archive that hover effect.

I did some changes to make it work for you, helpfully can give you some hints.

style.css line 100

.brium {
    width: 360px;
    height: 360px;
    position: relative;
    background-color: var(--Cyan);
    display: block;
    transition: all 300ms ease-in-out;
    z-index: 1;
    border-radius: 1rem;
    overflow: hidden;
}

.brium::after {
    content: url(../images/icon-view.svg);
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 300ms ease-in-out;

}
.brium:hover img {
    opacity: 0.55;
}

.brium:hover::after {
    opacity: 1;
}

/* and here you have it, just remove the reset */

/* HOVERS  */

/* .equilibrium:hover {
    color: var(--Cyan);
    cursor: pointer;
}
.name:hover {
    color: var(--Cyan);
    cursor: pointer;
}
.brium:hover{
   background-color: var(--Cyan);
   border-radius: 1rem;
   background-image: url(/images/icon-view.svg);
} */

Hope this help!!

useful resource

• https://www.w3schools.com/howto/howto_css_image_overlay.asp.

overall, Happy codding, and have a Good Day/Night

Something you can do mentioned by @Hussain5325 it is to created the effect with a pseudo element(like ::before) or you could also make the effect with a div with the class of overlay , here is a an example about that Overlay icon

also something you can do it is to take the image and make the effect with javascript

Hi There Kevin Garcia!

I am here to tell you that you can make hover effect by using pseudo elements on the image.

if you cannot do it yourself try to see solutions.

Here is my solution for it.

https://www.frontendmentor.io/solutions/nftpreviewcardcomponentmain-PYUCRWtTXZ