Position element over image element but the image changes size with the window

Question

I have an image which changes size to the windows size, and I need to position an element (anchor tag) on it so that it is always in the same place relative to the image. The image is not a background image but an HTML element.

This question is very similar but is for when the image is a background image. Position element over background image. But the BG img changes size with the window. CSS

<img src="images/img.jpg" >
<a href="3">Link that should be over the image in a certain location.</a>

Can you post an example of that as an answer and I will mark as correct? — MicFin, Jul 20 '16 at 16:16

score 1 · Answer 1 · answered Jul 20 '16 at 16:16

1

<div class="wrapper">
    <img src="images/img.jpg">
    <a href="3">Link that should be over the image in a certain location.</a>
</div>

<style>
    .wrapper {
        position: relative;
    }

    a {
        position: absolute;
        top: 10%;
        left: 10%;
    }
</style>

answered Jul 20 '16 at 16:16

tocqueville

5,270
2
40
54

Can the tag be the wrapper? – MicFin Jul 20 '16 at 16:16
1

No. The point here is that the wrapper gets the size from the image, so your element can be positioned relatively to it. – tocqueville Jul 20 '16 at 16:18
Thank you. Other author responded first in original comment and created codepen example. Your answer was very helpful tho! – MicFin Jul 20 '16 at 19:10

Ram Segev · Answer 2 · 2016-07-20T16:43:59.397

Do you mean something like this?

    .image { 
       position: relative; 
       width: 100%; /* for IE 6 */
    }
    
    a { 
       position: absolute; 
       top: 20px; 
       left: 0; 
       width: 100%; 
    }

<div class="image">
    
          <img src="http://kingofwallpapers.com/grey/grey-001.jpg"/>
          
          <a href="3">Link that should be over the image in a certain location.</a>
    
    </div>

score 0 · Accepted Answer · answered Jul 20 '16 at 16:18

Wrap the image etc in an shrink-wrapped div and base the positioning off that.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.map {
  margin: 10px;
  border: 5px solid red;
  position: relative;
  display: inline-block;
}
.map img {
  max-width: 100%;
  display: block;
}
.box {
  width: 5%;
  height: 5%;
  background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}
#pin-1 {
  top: 25%;
  left: 36%;
}
.box:hover > .pin-text {
  display: block;
}
.pin-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 75%;
  white-space: nowrap;
  display: none;
}
.pin-text h3 {
  color: white;
  text-shadow: 1px 1px 1px #000;
}

<div class="map">
  <img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
  <div id="pin-1" class="box">
    <div class="pin-text">
      <h3>My House</h3>
    </div>
  </div>
</div>

Codepen Demo

Thank you for first reply and codepen demo! To simplify for more beginner Programmers, I suggest remove some unrelated HTML and CSS from the answer for a more basic example. — MicFin, Jul 20 '16 at 19:09

Position element over image element but the image changes size with the window

3 Answers3