All comments

• 

  Elvis•220

  @Elvislex

  Submitted almost 2 years ago

  

  responsive page landing using flexbox

  2

  21
  

  Jimmy•60

  @MonetCode88

  Posted almost 2 years ago

  Hey, Elvis perhaps you could nest another div within your card-img div and name it with a class of "overlay". Then put this div directly before your img tags so that it sits on top, then you can target it in CSS with hsla. The a is for the alpha channel which controls your opacity.

  .overlay { position: absolute; width: 100%; height: 100%; background: hsla(277, 64%, 61%, 0.5)

  setting the alpha channel to 0.5 gives you 50% opacity, this is what I did to get my image colored the correct way however I'm still new so there could be another better way. Hopefully, this helps.

  1

  Marked as helpful