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

NFT card

beth 110

@beth1207

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


I found using the hoover efect extremely difficult I am unsure of the active version what is the difference between margin and padding

Community feedback

@climb512

Posted

You did it!! Looks great! I see that you used a screenshot image of the "eye icon" rather than the .svg in the images folder, which is fine if you prefer how the .png looks. The main reason to prefer an .svg over a .png is that it will scale up without losing its sharpness, but that isn't an issue here.

Great job :)

Marked as helpful

0

@climb512

Posted

Looks good!

You've got the basics down, now let's tackle the positioning concepts that make the hover effects possible.

The hover effect on the main image is done in css by using "position" and "opacity". So, first create an empty <div> the same size as the large image, center the "eye" icon inside of it, setting a cyan background and then, importantly, setting its opacity to 0. This makes it invisible. Then you use :hover on the <div> to change opacity to 1 when the mouse hovers over it. Something like this:

HTML:
<div class="image-group">
<img class="image__img" src="images/image-equilibrium.jpg" alt="NFT Equilibrium #3429">
<div class="image__overlay">
<img src="images/icon-view.svg" alt="eye icon" class="hover-eye">
</div>
</div>

CSS:
.image-group {
position: relative;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;  // this means 100% of the containing element, the .image-group div
height: 100%; // this means 100% of the containing element, the .image-group div
background: hsla(178, 100%, 50%, 0.5); //cyan color
opacity: 0;
.image__overlay:hover {
opacity: 1;
}

As for margin vs padding, you can search for info on the "box model" of css, and there are a million resources that explain it in detail. Basically, your "content", like, say, a picture or some text, sits at the center of your element (a <div>, a <p>, or whatever). This element can have padding, then possibly a border and finally margin around it, in that order, moving outwards from the center. Padding and margin can both be used to space out elements, but experimentation will show you that they are actually not the same. For instance, a background color will show up in the padding, but not in the margin. Please check out the "box model" for a full explanation.

I hope this helps! Keep coding!!

Marked as helpful

0

beth 110

@beth1207

Posted

this was an eye opener thanks a lot. I appreciate, hope you'll review the updated one.@climb512

0

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