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.
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>``` .
Is there a better way I would have organized this?
Thanks @jasurkurbanovinit for the well detailed and elaborate feedback, I will make corrections as stated and will have that in mind for my next challenge, i really appreciate man.
How can i get to show the view icon when hovering the NFT image?
I used pseudo classes in mine and it works fine. Try pseudo ::before and ::after
