Submitted over 3 years ago

NFT Preview Card using Adjacent-Sibling Selector

@braien-machado

A solution to the NFT preview card component challenge

Solution retrospective

Is there a simpler way to change opacity of the nft image when hovering the view icon with only HTML and CSS or the Adjacent-Sibling Selector solution is the best?

Code

Please log in to post a comment

Community feedback

Byron•2,290

@byronbyron

Posted over 3 years ago

Hi @braien-machado

You can put a hover on the img-container to show the eye icon and cyan background as a pseudo element. Something like...

<div class="img-container">
    <img src="./images/image-equilibrium.jpg" alt="equilibrium" class="card-img">
</div>

.img-container {
    position relative;
}

.img-container::before {
    content: '';
    background: url('./image/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.img-container:hover::before {
    visibility: visible;
    opacity: 1;
}

Here's a similar example

Hope that helps 👍

Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord