Precise text overlay on image (and responsive)-CodePudding

I would like to put text on a specific spot on a picture. This text must stay in the same place relative to the image. I made this simple example to illustrate the problem. The '60kg' must stay next to the materials. If i resize the browser slightly the text moves and is not next to the materials anymore. This is how it is supposed to be (even when resizing): example

here is my code or check this jsfiddle https://jsfiddle.net/9qc8kps0/64/

HTML

<div >
    <img  src="https://img.freepik.com/free-vector/isolated-tower-crane-cartoon-style_1308-104645.jpg?w=2000" 
      >
    <div >
      60kg
    </div>

CSS

.background {
  background-color: lightgrey;
  position: relative;
}

.crane {
  width: 30vw;
  margin-left: 35vw;
  position: absolute;
}

.overlay {
  background-color: rgb(255, 0, 0, 0.5);
  position: absolute;
  margin-left: 43vw;
  margin-top: 37vh;
  width: auto;
  font-size: 1em;
  padding: 2px;
}

Let me know if I have to explain my problem more :)

CodePudding user response：

Don't position the image, and use percentages to position the text rather than absolute values.

.background {
  background-color: lightgrey;
  position: relative;
  display: inline-block;
  height: 100vh;
}

.crane {
  max-width: 100%;
  height: 100%;
}

.overlay {
  background-color: rgb(255, 0, 0, 0.5);
  position: absolute;
  left: 30%; /* adjust as required */
  top: 52%; /* adjust as required */
  width: auto;
  font-size: 1em;
  padding: 2px;
}

<body>
  <div >
    <img  src="https://img.freepik.com/free-vector/isolated-tower-crane-cartoon-style_1308-104645.jpg?w=2000" >
    <div >
      60kg
    </div>
</body>

CodePudding user response：

Because it's not possible to create a child element in an image, you need to align the images to a shared container. If we were talking about two divs, we could do something simple just as:

<div id="container">
    <div id="child"></div>
</div>

#container {
    position: relative;
    border: 2px solid red;
    width: 10rem;
    height: 10rem;
}

#child {
    position: absolute;
    top: 20%;
    left: 20%;
    border: 2px solid blue;
    width: 2.5rem;
    height: 2.5rem;
}

JSFiddle

Because one of our elements is an image, we need to take another approach. Our text and crane image should both have absolute positioning. The container needs to have a relative position. We need to create a shared container. Then, we can specify with absolute positioning (top, bottom, left, right) how we want the text to be relative to the image. We should use percentages other than absolute values.

It can be implemented this way:

Please note that I created a responsive-friendly design using a flex-container.

<body>
  <div >
    <div >
      <img  src="https://img.freepik.com/free-vector/isolated-tower-crane-cartoon-style_1308-104645.jpg?w=2000" >
      <div >
        60kg
      </div>
    </div>
</body>

.flex-container {
  display: flex;
  justify-content: center;
}

.background {
  background-color: lightgrey;
  position: relative;

}

.crane {
  width: 30vw;
  position: relative;
}

.overlay {
  background-color: rgb(255, 0, 0, 0.5);
  position: absolute;
  font-size: 1em;
  padding: 5px;
  left: 30%;
  top: 50%;
}

You might also want to add some media queries to make it more accurate:

@media only screen and (min-width: 800px) {
  .overlay {
    top: 52%;
  }
}

JSFiddle