Submitted over 2 years ago

NFT-preview-card-component

Maca•630

@Maacaa0

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

First time trying out flexbox.

I am glad i kind of figured out how to make the hover over main image. But I am not sure why the eye icon shares oppacity with the hovered image. I could not make it completely white.

Looking forward to your suggestions.

Community feedback

Emmanuel ifeanyichukwu•60

@Mire-webPosted over 2 years ago

You should use pseudo classes to style the aftereffect of the view icon something like this:

.view::after{
  content: "";
    display: block;
    position: absolute;
    transform: translate(-50%, 0);
    background-image: url(./icon-view.svg);
    background-repeat: no-repeat;
    background-position: center;
    left: 50%;
    top: 180px;
    height: 50px;
    width: 50px;
    opacity: 0;
    transition: ease-in-out 300ms;
}

should make the view icon behave independent of the div.

Accessibility: Use Id instead of class for your landmark <aside id='eth'></aside> or use

           <img class="svg" id="clock" src="./icon-clock.svg" alt="" />
           <h2 class="date">3 days left</h2>``` .

Marked as helpful

Maca•630

@Maacaa0Posted over 2 years ago

@Mire-web Appreciate your Feedback. I will look into it.

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