@Senatrius
Posted
Nice work on this project! Only a few things to fix.
-
Overflow: there's no need to have the
overflow: hidden
on the body tag. With it, if you resize the window so it's smaller than the card, it just goes off screen with no way to see it. It's better to remove theoverflow: hidden
and have the scroll bars if they're needed, you never know what device a user views it on. -
Unnecessary nesting: maybe I can't tell in the dev tools, but I don't think
div.wrapper
around thediv.card
does anything and can be removed. Ignore if I'm wrong here. -
Headings: Use
h1
instead ofh2
and style the font size if needed. Never use heading tags for styling purposes. -
Overlay on hover: to answer the question you asked about changing color on hover, you could use a separate absolute position div and style it based on whether the image container is being hovered or not. It would look something like this
<div class="image">
<div class="overlay">[add your icon or whatever you need here to show up on hover]</div>
<img src="images/image-equilibrium.jpg" class="card__image" alt="product_image">
</div>
.image {
position: relative;
}
.overlay {
display: none;
position: absolute;
inset: 0;
background: [color you want]
}
.image:hover > .overlay {
display: block;
}
you can style the div however you like. or use some other tag if you want to it be clickable, it should work the same.
Keep it up :)