CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-position
MicFin
MicFin

Reputation: 2501

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

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>

Upvotes: 0

Views: 668

Answers (3)

Ram Segev
Ram Segev

Reputation: 2571

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>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115100

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

Upvotes: 0

Franc
Franc

Reputation: 5496

<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>

Upvotes: 1

Related Questions