title: Positioning an absolute element on a zooming image
body: <p>I have some very simple code but I encountered an issue. I have a background image which is zoomed in upon scroll. I would like to relatively position an element relative to the background image which takes up the full width and height of the screen. How could I do this? I thought it would be as simple as having relative and absolute containers. For better context here is the image (<a href="https://imgur.com/rc8Ia3d" rel="nofollow noreferrer">https://imgur.com/rc8Ia3d</a>). I am attempting to place an element on the screen of the camera. Do I have to think of a more outside of the box approach? Thank you.</p>
  <p>Here is some of the very simple code</p>
  <pre><code>    &lt;script type=&quot;text/javascript&quot;&gt;
  $(window).scroll(function() {
  var scroll = $(window).scrollTop();
  $(&quot;.hero-zoom img&quot;).css({
  width: (100 + scroll/5)  + &quot;%&quot;,
  top: -(scroll/10)  + &quot;%&quot;,
  });
  });
  &lt;/script&gt;
  
  header img{
  width: 100%;
  max-width: none;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  }
  </code></pre>