CODEWITHSUNDEEP
htmlcssresponsiveoverlay
Jimmy van Delft
Jimmy van Delft

Reputation: 3

Precise text overlay on image (and responsive)

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

.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;
}
<div class="background">
  <img class="crane" src="https://img.freepik.com/free-vector/isolated-tower-crane-cartoon-style_1308-104645.jpg?w=2000" 
    class="img-responsive">
</div>
<div class="overlay">
    60kg
</div>

Upvotes: 0

Views: 1149

Answers (2)

ChenBr
ChenBr

Reputation: 2672

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 class="flex-container">
    <div class="background">
      <img class="crane" src="https://img.freepik.com/free-vector/isolated-tower-crane-cartoon-style_1308-104645.jpg?w=2000" class="img-responsive">
      <div class="overlay">
        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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115361

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 class="background">
    <img class="crane" src="https://img.freepik.com/free-vector/isolated-tower-crane-cartoon-style_1308-104645.jpg?w=2000" class="img-responsive">
    <div class="overlay">
      60kg
    </div>
</body>

Upvotes: 1

Related Questions