Element centered on page moving down near to bottom right when I hover over the div.

[robtherobot12]

Hi there, I recently discovered this plugin and I love using it but when I hover over my div it moves down across the page. Let me show you some pictures:
The images

I'm using this css for centering:

.radio {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

And this is the html:

<div class="radio" data-tilt data-tilt-max="1" data-tilt-speed="100">
        <img src="https://media4.giphy.com/media/jUJgL0iByjsAS2MQH1/giphy.gif?cid=ecf05e47mxaj52sr8m70filml8juw3o9odak51rnzlz1ufxp&rid=giphy.gif"/>
        <div class="radiodescription">
          <h2>LOFI RADIO</h2>
        </div>
    </div>

I am using php, site is hosted on glitch, and there is a css reset that runs at the start.

[plovinicius]

@robtherobot12 i think u can put this div inside another, like this example which i have made: https://codepen.io/plovinicius/pen/YzNZXGW

[robtherobot12]

@robtherobot12 i think u can put this div inside another, like this example which i have made: https://codepen.io/plovinicius/pen/YzNZXGW

Thanks!