Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Using FlexBox

#accessibility
Luiz Davi 110

@lzdavic

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, I tried to do the hover style on the image using CSS, i don't know if it's the right aproach, because when i use

.card__image:hover {
     content: url('../images/icon-view.svg')
}

the image is replaced, i dont know what's the way, i aprecciate help!

Community feedback

Jaykler 30

@Jaykler

Posted

Hi,

Theres a css pseudo element ":active" The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

check this pages out for more info and examples:

https://developer.mozilla.org/en-US/docs/Web/CSS/:active https://www.w3schools.com/css/css_pseudo_classes.asp

W3School Try it yourself:

https://www.w3schools.com/css/tryit.asp?filename=trycss_pseudo-class_links

1

Luiz Davi 110

@lzdavic

Posted

@Jaykler Looking at other solutions and in the stackoverflow i could do the img:hover::after, and positioned it on top of the img with opacity.

1
Jaykler 30

@Jaykler

Posted

@lzdavic Sounds perfect! Thanks for sharing!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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