Submitted almost 3 years ago

NFT preview card component

accessibility, styled-components

Sai•50

@A-C-Sai

A solution to the NFT preview card component challenge

Preview Code

Solution retrospective

Hello Friends,

I got a few questions!! sorry for the long question :( ...

To display the hover/focus styles when hovering over the cube image, I've initially added the hover styles using the ::before pseudo-element and set the opacity to 0. Then set the opacity to 1 when hovered. (Continuation of the question after code block).

<div class="avatar">
          <img
            class="cube-img"
            src="./images/image-equilibrium.jpg"
            alt="image of cube balanced on one of it's vertex and at equilibrium"
          />
</div>

.avatar::before {
  content: url("./images/icon-view.svg");
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 255, 247, 0.6);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.1s ease-in;
}

.avatar:hover {
  cursor: pointer;
}

.avatar:hover::before {
  opacity: 1;
}

I initially did .avatar:hover .avatar::before { opacity: 1;} instead of .avatar:hover::before { opacity: 1;} as I thought .avatar:hover .avatar::before { opacity: 1;} meant when you hover over the .avatar div changes will be made .avatar::before, but nothing changed. Could someone explain why my initial code/ thinking was incorrect?

In my HTML, I added the raw SVG code using <svg> to display the SVG image. Is there any other alternative?
Any best coding practices I can improve on?

Please let me know anything else I haven't mentioned above and could improve.

THANKS IN ADVANCE (:

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Cosmo•590
@cosmoart
Posted almost 3 years ago
Hi Sai!, Congratulations on completing this challenge, it looks great!, .avatar:hover .avatar::before { opacity: 1;} Translates to: When hovered in .avatar you will give an opacity of 1 to the ::before child from .avatar named .avatar.

It would be something like this:
```
	<div class="avatar">
<div class="avatar"></div>
</div>
```
You can see it more clearly by hovering over the selector from a code editor like Visual Studio Code.

Another way to display the SVG is using the <img> tag, something like this:
```
<img src="image.svg" alt="...">
```
If you want to know more about the differences is to use each one you can see this question on stackoverflow

I hope you find it useful, Happy coding! 👋
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