Aligning clock hands in overlaying div with background image (responsive)

I am working on a website and one of the pages have a header image of a clock. Now, I want the hands to be moving backwards, which they do fine, but the problem is that the site is responsive and I am desperately trying to align the hands with the background image.

It is working as long as the image is just being scaled down, but when you just alter the width of the window, the hands are flying away… hard to explain,
here is the fiddle:

fiddle

Actually works better on the site at the moment than on the fiddle…

Maybe one has an idea, I really appreciate any help.

Thanks a lot!

@keyframes rotateHours {
  0% {
    transform: rotateZ(85deg);
  }
  100% {
    transform: rotateZ(-275deg);
  }
}
@keyframes rotateMinutes {
  0% {
    transform: rotateZ(320deg);
  }
  100% {
    transform: rotateZ(-40deg);
  }
}
@keyframes rotateSeconds {
  0% {
    transform: rotateZ(220deg);
  }
  100% {
    transform: rotateZ(-140deg);
  }
}
.hero_image {
  background-image: url(https://webdev.gestigon.de/files/theme/images/layout/headerimages/uhr_ohne_zeiger.jpg);
}
#clock {
  position: relative;
  border: 3px solid lightcoral;
  height: 32.4vw;
  width: 32.4vw;
  left: 2.6vw;
  top: 15.1vw;
  overflow: hidden;
  z-index: 100;
}
#hours {
  animation: rotateHours 4320s infinite linear;
  position: absolute;
  height: 1.5vh;
  top: calc(19vw - 0.5vh);
  left: 9.8vw;
  /*background-color: violet;*/
  width: 12vw;
}
#minutes {
  animation: rotateMinutes 360s infinite linear;
  position: absolute;
  height: 1vh;
  top: calc(19vw - 0.4vh);
  left: 8.4vw;
  /*background-color: dodgerblue;*/
  width: 15vw;
}
#seconds {
  animation: rotateSeconds 6s infinite linear;
  position: absolute;
  height: 0.8vh;
  top: calc(19vw - 0.4vh);
  left: 8.4vw;
  /*background-color: red;*/
  width: 15vw;
}
#seconds img {
  width: 1.32vw;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(41deg);
  top: -7.45vw;
  left: 6.88vw;
  position: relative;
}
#minutes img {
  width: 1.265vw;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(40deg);
  top: -7.25vw;
  left: 5.95vw;
  position: relative;
}
#hours img {
  width: 1.265vw;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(0deg);
  top: -4.65vw;
  left: 5.55vw;
  position: relative;
}
<div class="hero_image">
  <div class="header_line">
    <h1>Recap</h1>
  </div>
  <div class="scroll_arrow"><i class="fa fa-chevron-down"></i>
  </div>
  <div id="clock">

    <div id="hours">
      <img src='http://webdev.gestigon.de/files/theme/images/layout/stundenzeiger.png'>
    </div>
    <div id="minutes">
      <img src='http://webdev.gestigon.de/files/theme/images/layout/minutenzeiger.png'>
    </div>
    <div id="seconds">
      <img src='http://webdev.gestigon.de/files/theme/images/layout/sekundenzeiger.png'>
    </div>
  </div>
</div>


Source: css

Leave a Reply