flex box

Community feedback

• 

  akhademik•420

  @akhademikPosted over 2 years ago

  you can try this:

  div.card {
    your image
  }
   div.card::before:hover {
  your overlay color
  }
  div.card::after:hover{
  your eye icon
  }
  

  Marked as helpful

  1
• 

  Rodrigo Vergara•680

  @UnTalPelucaPosted over 2 years ago

  For the eye icon you could wrap .main-img and .icon in a div. To this new div give it a "position: relative" and for the .icon give it a "position: absolute" and "top:0". You can remove the translate and left. "Absolute" elements take as reference the position of the closest "relative" parent element. By giving it top:0 it will position itself at the top of the div that wraps the image.

  Marked as helpful

  1
• 

  sujit•50

  @SujitAdrojaPosted over 2 years ago

  Yeh sure I will try it .

  0
• 

  sujit•50

  @SujitAdrojaPosted over 2 years ago

  First of all thanks for reply. Thank you for the solution it helped a lot.

  0