responsive page landing using flexbox

Community feedback

• 

  Jimmy•60

  @MonetCode88Posted about 1 year 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.

  Marked as helpful

  1

  ---

  

  Elvis•220

  @ElvislexPosted about 1 year ago

  @MonetCode88 thank you so much for this

  0
• 

  hitmorecode•6,250

  @hitmorecodePosted about 1 year ago

  Nice well done, good effort. As for your problem with the image overlay, you can solve it like this.

  .card-img {
    position: relative;
  }
  
  .card-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #aa5cdb;
    mix-blend-mode: multiply;
    opacity: 0.8;
  }
  

  If this doesn't make sense to you let me know

  Marked as helpful

  0

  ---

  

  Elvis•220

  @ElvislexPosted about 1 year ago

  @hitmorecode thank you so much for this

  0