@marcfranciss
Posted
Great solution!
You may just fix a little spacing error on your 'cart' class so that the hover animation will be on the button itself not on the figure and text. Also, if you're not using the semantic element 'button', you may add 'cursor: pointer' so it will be considered a button.
.card:hover {
background-color: #003622;
cursor: pointer;
}
Keep up the great coding!
Marked as helpful
@praistyles
Posted
@marcfranciss Thanks for the feedback, really appreciate. Can you please assist with how you tackle the images (mobile& desktop img on html and also how to style) l really struggled.
@marcfranciss
Posted
@praistyles You're welcome!
About images, I always set it to follow its container:
img-container {
border-radius: 5px;
overflow: hidden; // for the image to follow container's border-radius if it is set
(other css...)
img {
width: 100%; // to follow container's width
height: 100%; // to follow container's height
object-fit: cover; // so the image is taking all the space of container
}
}
Then, you can style your container depending on your needs and the image will follow it.
Hope this helps. Cheers! š»
Marked as helpful
