@AbdulrhmanSoliman
Posted
Hello @0xAbdulKhalid, congrats on completing this challenge and for your awesome solution.
I suggest you setting the effect of the hover (scale) to the <picture> HTML tag element, because the scale property should relate only with the image when hovering on it.
I hope you find it helpful.🎉
Happy Coding
@0xabdulkhalid
Posted
@AbdulrhmanSoliman Assalamu alaikum warahmatullahi wabarakatuh brother !
- Thanks for providing suggestion by spending your valuable time in evaluating my code
- If i set the hover to
<picture>, then it will ran through issues - I recommend you to manipulate the dom by making changes via dev console and then provide your feedback
- Because we want to first validate our review before posting, i hope you can understand what i'm saying
- Jazhakallahu kairan Brother
@AbdulrhmanSoliman
Posted
@0xAbdulKhalid
Wa'alaikum assalamu warahmatullahi wabarakatuh
I found from your CSS file this code below.
.product:hover > picture > img{ transform: scale(1.2); filter: brightness(1.1); z-index: -1; }
I suggest changing the .product class to the <picture> HTML tag because we want to make the picture to be scaled when hovering only on this picture.
So to fix this issue I suggest you to use this code below
picture:hover > img{ transform: scale(1.2); filter: brightness(1.1); z-index: -1; }
Thank you @0xAbdulKhalid I hope you find it helpful.
