flex box, grid and media query

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 months ago

  Hey ! Great work out there i just want to share on how to achieve color overlay is you will use a css properties called mix-blend-mode and apply it on img element , also you need to apply bg-color in the img container . by doing and applying those properties you can now achieve the color overlay same as original design has happy coding !!.

  .right {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: hsl(277, 64%, 61%); // add this
  }
  

  .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    mix-blend-mode: multiply; // add this
    opacity: 0.7; // you can adjust this
  }
  

  Marked as helpful

  0