display flex, sass

Community feedback

• 

  Ridwanullah•210

  @DanonymousCoderPosted over 1 year ago

  /* Style for the eye icon */ .image-container .overlay img { height: 50px; width: 50px; color: white; }

  Marked as helpful

  0
• 

  Ridwanullah•210

  @DanonymousCoderPosted over 1 year ago

  /* Style for the overlay */ .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 255, 255, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; border-radius: 10px; }

  Marked as helpful

  0
• 

  Ridwanullah•210

  @DanonymousCoderPosted over 1 year ago

  Nice work bro, keep grinding. I saw that you have a problem with the hover effect of the image. Firstly you have to remove the height with the background-color of cyan. Secondly you would need to create a CSS element like this element:hover .

  Marked as helpful

  0

  ---

  

  LuccaMauroMolina•130

  @LuccaMauroMolinaPosted over 1 year ago

  @DanonymousCoder good evening, thank you very much, I thank you very much and I will try that

  0
• 

  Ridwanullah•210

  @DanonymousCoderPosted over 1 year ago

  /* Show the overlay and transform the image when hovered */ .image-container:hover img { transform: scale(1.1); }

  .image-container:hover .overlay { opacity: 1; }

  0