CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
Netanel Hajaj
Netanel Hajaj

Reputation: 11

overlay image on another image in html with bootstrap 4

I want to overlay image on another image and change the pixel(location) of it. I search the google and wrote this code:

.background {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(440px, 340px);
  z-index: 2;
}
<div class="container-fluid">
  <div class="row" style="margin-top:10px;">
    <div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10  " id="test">
      <img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
      <img src="static/overlay.png" id="overlay2" class="overlay">
    </div>

This code gives me the result I want, but the problem is when I resized the page, the image-overlay get out from the background image. I want to preserve the proportion between them.

Upvotes: 1

Views: 2467

Answers (2)

Vishnu Baliga
Vishnu Baliga

Reputation: 413

Reason

The reason why the image overlay is not responsive because you are giving a specific value translate(440px, 340px) for transform and this is applicable for all the devices.

How to fix it

Use media queries (@media) for each viewports/devices.

or

Make the overlay-image absolute position with respect to it's container #test. I've used this approach to achieve the result. You can have a look at the working fiddle.

Link: https://jsfiddle.net/Baliga/fme12tby/22/

Upvotes: 1

Nattamai Jawaharlal Manikandan
Nattamai Jawaharlal Manikandan

Reputation: 226

Hope this might help you.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .image-container {
            position: relative;
            display: inline-block;  
        }
        .image-overlay {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="image-container">
      <img class="image-content"  src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
      <img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
    </div>
</body>

Upvotes: 0

Related Questions