Positioning text on image - example

by jonahe

HTML

<div class="some-outer-container">
  <h1>
    Cats
  </h1>
  <div class="img-container">
    <img class="cat-img" src="https://www.catster.com/wp-content/uploads/2018/07/Savannah-cat-long-body-shot.jpg" />
    <div class="text-on-img nose">Nose</div>
    <div class="text-on-img tail">Tail</div>
    <div class="text-on-img ear">Ear</div>
  </div>
 <h2>
   End
 </h2>
</div>

CSS

.img-container {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  border: 1px solid red;
  
  animation: zoomInOut 4s infinite;
  transform-origin: top left;
}

.cat-img {
  width: 400px;
}

.text-on-img {
  display: inline-block;
  position: absolute;
  
  font-size: 20px;
  font-weight: bold;
  background: rgba(222,222,222,0.6);
  border: 1px solid rgba(222,222,222,0.9);
}

.text-on-img.nose {
  top: 60px;
  right: 80px;
}

.text-on-img.tail {
  bottom: 90px;
  left: 50px;
}

.text-on-img.ear {
  top: 15px;
  right: 40px;
}


@keyframes zoomInOut {
  0% {
    transform: scale(1);
    margin-bottom: 0px;
  }
  50% {
    transform: scale(0.8);
    margin-bottom: -40px;
  }
}