@elaineleung
Posted
Hi Diego, well done completing your second challenge here! It's wonderful to see the high level of attention to detail, which might be due to your background in UI.
I think you really did many things well here, such as how you centered the component and how you created the overlay. The only suggestion I have is to have the img for the cube as an actual HTML element instead of as a background image. This would be better for accessibility, since this image is considered a major part of the content. For things like icons where they're only decoration and it's not really necessary for them to be there, a background image would be fine, even though I would still prefer to use img but with aria-hidden="true" added so that screen readers could skip them.
Great job, and looking forward to more solutions!
Marked as helpful
@diegopereira0
Posted
@elaineleung
Hi, Elaine! How are you?
Thank you so much for the tips! On start i put the img instead background, but i couldn't made the hover effect with the background color layer and the eye icon, so decided use a background with ::after on hover, wich were a solution that i knew. But i'll consider your recomendation on the next times. Thanks again!
Hugs from Brazil!
@elaineleung
Posted
@diegopereira0 You're welcome, Diego! Here's what I did for the overlay in my solution, see whether it can help you:
HTML here:
<div class="product-img">
<img src="./images/image-equilibrium.jpg" alt="Equilibrium, a multicolor cube" />
<div class="overlay" aria-hidden="true">
<img src="./images/icon-view.svg" alt="">
</div>
</div>
CSS:
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background-color: hsla(178deg, 100%, 50%, 0.5);
opacity: 0;
display: grid;
place-content: center;
transition: opacity 200ms ease-in-out;
}
.overlay img {
width: 3rem;
height: 2rem;
}
.overlay:hover {
opacity: 1;
}
Hugs from Canada! 😊
Marked as helpful
