Overlay text

Example how to overlay text on an image

HTML

<div class="container">
  <img src="http://www.image-maps.com/m/private/0/ltfk6i54j34088ug6icr68iso6_fesieri-middel-fitness.jpg" />
  <a class="link1" href="https://fitness.com.ro/home/488-standing-abductor-machine.html" target="_blank"></a>
  <a class="link2" href="https://fitness.com.ro/home/83-gluteus-machine.html" target="_blank"></a>
  <a class="link3" href="https://fitness.com.ro/home/482-hip-thrust.html" target="_blank"></a>
  <a class="link4" href="https://fitness.com.ro/home/83-gluteus-machine.html" target="_blank"></a>
</div>

CSS

.container{
  width: 100%;
}
img{
  width: 100%;
}
.link1 {
  position:absolute;
  left:50px;
  top:20%;
  width: 50%;
  height: 50%;
}
.link2 {
  position:absolute;
  right:20%;
  top:20%;
  width: 50%;
  height: 50%;
}
.link3 {
  position:absolute;
  right:20%;
  bottom:0;
  width: 50%;
  height: 50%;
}