Submitted 4 months ago

NTF card using Flexbox

Carolina Ciolin• 100

@CarolinaCiolin

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

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,140

@R3ygoski

Posted 4 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

Carolina Ciolin• 100

@CarolinaCiolin

Posted 4 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.

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