Submitted 5 months ago

NTF card using Flexbox

Carolina Ciolin•100

@CarolinaCiolin

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

I would like to know if there is any another way to make the hover styles on the main image link other than using pseudo-elements.

.card .link-main-image{
    display: flex;
    position: relative;
}

.card .link-main-image::before{
    content: '';
    display: none;
    background-color: var(--cyan);
    border-radius: 10px;
    opacity: 40%;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card .link-main-image::after{
    content: '';
    display: none;
    background: url('../images/icon-view.svg') no-repeat center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card .link-main-image:hover::before,
.card .link-main-image:hover::after{
    display: block;
}

Community feedback

Bernardo Poggioni•5,280
@R3ygoskiPosted 5 months ago
Hello Carolina, congratulations on completing your project! It turned out very well.

Regarding your question, yes, you can simulate the :hover effect without using pseudo-elements or pseudo-classes, but I must warn you that it’s not a practical approach. You could do something like this in a JavaScript file, for example:

block.addEventListener('mouseover', () => { block.style.display = 'block' }) block.addEventListener('mouseout', () => { block.style.display = 'none' })

However, this may add an extra layer of complexity to your project. Personally, I recommend sticking to the use of the hover pseudo-element.

And again, congrats, if you have any further questions or doubts, feel free to ask, and I’ll do my best to assist!
Marked as helpful
1
Carolina Ciolin•100
@CarolinaCiolinPosted 5 months ago
Hey, thank you very much for your comment :)

I'll be learning JavaScript soon, so I'll come back to this project to try it out the way you suggested.
1

Please log in to post a comment

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