How to bind an overlapping image to a certain part of an underlying image?

Question

A follow-up on How to let one of two vertical elements' height depend on another?

I want to have a play\pause button, which is placed over my image and which overlaps exactly the same part of the underlying image. In my example, that is the center of the left eye of the penguin. My attempt to achieve it:

function playPause() {
  if(document.getElementById('player').src.endsWith('dQ39oPh.png')) {
    document.getElementById('player').src = "https://i.imgur.com/r4My4Ep.png";
  }
  else {
    document.getElementById('player').src = "https://i.imgur.com/dQ39oPh.png";
  }
}

body { 
  background-image: url('https://i.imgur.com/sWfZ8nq.png');
  background-repeat: repeat;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.fg {
  display: grid;
  grid-template-rows: 1fr auto;
  margin: auto;
  height: 100vh;
}

.fg .text {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.text span {
  width: 100%;
  color: white;
  text-align: center;
  font-size: 10vmin;
  letter-spacing: 3px;
  text-shadow:  2px  2px 2px green,
                2px -2px 2px green,
               -2px  2px 2px green,
               -2px -2px 2px green;
}

.img #penguin {
  position: relative;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-height: 70vh;
  max-width: 90vw;
}

.img #player {
  position: absolute;
  bottom: 52%;
  left: 48.7%;
  transform: translateX(-48.7%);
  width: 1.3vw;
}

<html>
  <head>
    <link rel="stylesheet" href="styles.css"/>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div class="fg">
      <div class="text">
        <span>HNY19</span>
      </div>
      <div class="img">
        <img id="penguin" src="https://i.imgur.com/Ql8A585.png"/>
        <img id="player" onclick="playPause()" src="https://i.imgur.com/dQ39oPh.png">
      </div>
    </div>
  </body>
</html>

It looks okay for the viewport on my laptop (1920x969) but as soon as the size of the viewport changes, the positioning gets messed up. I am aware of a simple way to do it (one penguin with play image in the eye, another with pause image), but is there a way to do it in a responsively?

I also tried slicing technique like so

<table cellpadding="0" border="0" cellspacing="0">
  <tr>
    <td><img src="img/penguin_0_0.png"></td>
    <td><img src="img/penguin_0_1.png"></td>
    <td><img src="img/penguin_0_2.png"></td>
  </tr>
  <tr>
    <td><img src="img/penguin_1_0.png"></td>
    <td><a href="#"><img id="player" src="img/penguin_1_1_play.png"/></a></td>
    <td><img src="img/penguin_1_2.png"></td>
  </tr>
  <tr>
    <td><img src="img/penguin_2_0.png"></td>
    <td><img src="img/penguin_2_1.png"></td>
    <td><img src="img/penguin_2_2.png"></td>
  </tr>
</table>

with appropriate sliced images but that old slicing approach doesn't seem to work in grid css.

How to bind an overlapping image to a certain part of an underlying image?

0 Answers0