Responsive page using Bootstrap

Community feedback

• 

  Guillermo Mulvihill•190

  @guilleoemPosted over 2 years ago

  Hi @akcumeh. To overlay the image you need to ad one more <div> element to de img container, like this

  <div class="img01-div col-lg-6">
      <img src="images/image-header-mobile.jpg" class="img01" alt="">
      <div class="overlay"></div>
  </div>
  

  You need to add another for the img02 too

  <div class="img02-div col-lg-6">
      <img src="images/image-header-mobile.jpg" class="img02" alt="">
      <div class="overlay"></div>
  </div>
  

  Now add some css properties. In your .css file would look like

  .img01-div, .img02-div {
    margin: 0;
    padding: 0;
    border-radius: 15px 15px 0 0;
    position:relative; /*add this property*/
  }
  
  .overlay {
    /* absolute position of the overlay, relative to its container*/
    position: absolute;
    top: 0;
    left: 0;
    /* give it the size of its container*/
    width: 100%;
    height: 100%;
    /*and give it colour and transparency*/
    background-color: hsl(277, 64%, 61%);
    opacity: 0.6;
  }
  

  Remember to add border-radius property too!

  Marked as helpful

  1

  ---

  

  Angel Umeh•90

  @akcumehPosted over 2 years ago

  @guilleoem Thank you so much, this pretty much worked and I've updated my solution to reflect it. 🙌

  I appreciate your help! And I've learned something new 😁

  1

  

  Guillermo Mulvihill•190

  @guilleoemPosted over 2 years ago

  Hi @akcumeh. I just realized there is a better way to colour the img, and it only takes 2 lines of code!!

  First, you don't need de overlay div. The html code look like this:

  <div class="img01-div col-lg-6">
      <img src="images/image-header-mobile.jpg" class="img01" alt="">
  </div>
  

  as you had written it at the beginning. Then you set a background color to the container:

  .img01-div, .img02-div {
    margin: 0;
    padding: 0;
    border-radius: 15px 15px 0 0;
    background-color: hsl(277, 64%, 61%); /*add this line*/
  }
  

  and finally, blend the img with its container:

  .img01, .img02 {
    width: 100%;
    border-radius: inherit;
    z-index: -1;
    mix-blend-mode: multiply; /*add this line*/
  }
  

  Hope you like it. :-)

  Marked as helpful

  1

  

  Angel Umeh•90

  @akcumehPosted over 2 years ago

  @guilleoem This looks so much better and closer to the designs! I appreciate that you went to this length reviewing my code and trying to make it better. Thanks so much! 🤩🤗

  0

  

  Guillermo Mulvihill•190

  @guilleoemPosted over 2 years ago

  @akcumeh Well, I just learned it and I wanted to share it with you because you were on the same topic. I am happy that is was useful for you

  1