NFT preview card component

Hi Catherine, very good job!

I see that in the :hover state of the image the eye is not at full opacity.

To solve you could insert the eye through an img tag centering it through flexbox inside the div with class .color-image and making it visible only in the :hover state.

After, in .color-image you have to remove opacity and put the color through rgba:

background-color: rgba (0, 255, 247, .5);

Happy coding :)

Looks really good!

Might need a border-radius and overflow: hidden on the image to get the rounded corners, especially when hovering over it.

/** Container Image **/
.container-image {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  overflow: hidden;
}

Also, if you give the image a display: block;, it should get rid of the slight lip of space below the image, which is noticeable on hover.

.main-image {
    position: relative;
    height: auto;
    width: 100%;
    border-radius: 5px;
    display: block;
}

Nice job 👍

Hello,

a hover transition would be nice, it would be much smoother.

At the smallest size of the browser you have side scrolling.

If you resize the browser you are jumping between sizes, thats because of your media querries.

Besides these small things it looks great.

I hope i could help.

Hello Catherine!

The styling looks amazing and the comments in your CSS & HTML file make it easier to read and understand too. The transition is smooth too.

A small suggestion to match the design, even more, you can try changing the hover state of the card's image as below to match with the active state design: .color-image:hover { background-color: var(--cyan); opacity: 0.5; } to .color-image:hover { background-color: hsla(178, 100%, 50%,0.5); opacity: 1; }

i.e., instead of giving the whole hover thing an opacity of 0.5, we can give just the background an opacity of 0.5 using hsla() for cyan color so that the eye-svg does not get that opacity and its true color is shown.

And even, changing the font-weight of the card title to 600, card description, and time left to 300 if you are particular about matching the design weights 😄

The whole card style looks amazing and even your way of writing the HTML and CSS (with comments, and proper indentations) is really good and easily understandable.

Great Styling!

I just finished this challenge myself. Playing with the background properties to overlay images and your use of css custom properties was pretty cool. Can't wait to try them out myself! Keep at it!

Hi, good job ! Just a little tip, put "transition: background-color ease-in-out 0.3s;" not on the "color-image:hover" element but direclty into ".color-image". The transition when you take off your mouse of the image would be better.

It took me almost 2 hours to fix the same issue that u have here . Issue: the view-icon fades with hover effect! solve it by changing overlay opacity to 1 instead of half(or whatever u used), and search for how to give it a half opacity background on hover :)

Nice job. I really like that transition on mouseover. It really makes it better to look at. I may borrow that :). Keep it up.

Hola, estoy realizando este desafío pero no he podido avanzar porqué no sé como sobreponer la imagen "view" sobre la imagen "equilibrium" al momento de hacer hover sobre la imagen. Te agradecería si me recomiendas algún vídeo el cual de solución a mi problema, no importa si el vídeo está en inglés. Gracias

Hi, Looks good. Just a little confused by your width changes in the media queries. Would a 'max-width' do what you are looking for? Seems like you want to manage the width at different screen sizes. With max-width you wouldn't need to write a bunch of media queries to overwrite each other.

Found your solution a bit easy to understand compared to others , referred your solution to implement hover state for image

That's great! You also skipped the background part of the card as I did. It's really subtle. Good work.

Hello Catherine !! There just a need to add some small details in your code, especially in green part(eth sold) & deadline time. Which is [align-items] declaration, in order to have elements aligned in the same line as there icons. Have a nice day, good luck in your Dev journey.

Good job catheriene. the container-details div need less margin-bottom and the overlay need to be a little lighter but it looks great. I noticed that your report has 0 issues and I always have issues such as the html should include the lang = "en" although I do have it in my code, I hope you can help me with this.

The color of the overlay is very deep make it light, I mean change the opacity. Good Job!

Good work! a fine tuning tip if you want to do it...

in your <div class="container-image"> add the following properties in css: border-radius: 5px;, overflow: hidden; and line-height: 0;

you can remove the "border-radius" from your tag <img class="main-image" />

the code I indicated will make the children respect the format of the parent div(container-image) with this both its overlay and the image have rounded edges, the "line-height" will make its image and its overlay have a better framing, thus removing that difference in sizes that is at the bottom, "a small space"