Order Summary Component [ HTML5 + CSS3 ]

Community feedback

• 

  Abdulrhman Mohamed Soliman•390

  @AbdulrhmanSolimanPosted almost 2 years ago

  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

  0

  ---

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted almost 2 years ago

  @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

  0

  

  Abdulrhman Mohamed Soliman•390

  @AbdulrhmanSolimanPosted almost 2 years ago

  @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.

  0