@fernandolapaz
Posted
Hi, regarding your question:
- I leave you another way to do it in case you want to take a look (similar to what you did so you will understand it easily):
You can use the ::before pseudo-element to insert content (background and icon) to an element (the image).
Using position and width/height to cover the image and grid to center the icon. Then opacity to hide/show.
And we have a cleaner html with just the image.
.card__img {
position: relative;
}
.card__img::before {
position: absolute;
content: url(images/icon-view.svg);
display: grid;
place-content: center;
background-color: hsla(178, 100%, 50%, 0.5);
width: 100%;
height: 100%;
opacity: 0;
}
.card__img:hover::before {
opacity: 1;
}
- And I take the opportunity for another comment if you don't mind:
When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a>
or <button>
to wrap the image (depending on what happened when clicking on it).
I hope itβs useful π
Regards π
Marked as helpful