Как расположить гифку, чтобы она всегда находилась на одном и том же месте относительно своего родителя?

Question

[VasECHKA]

Есть ссылка, при наведении на которую появляется гифка.

<ul>
  <li>Email</li>
  <li>Skype</li>
  <li>Github</li>
  <li>vk</li>
  <li>Instagram</li>
  <li class="poster">
     <a href="#">Telegram</a>
       <div class="gif">
         <img src="https://i.gifer.com/iFc.gif"                      width="150" height="150">
       </div>
   </li>
 </ul>

.poster {
  position: relative;
}

.gif {
  position: absolute;
  opacity: 0;
  top: -90px;
  left: 120px;
}

.poster:hover .gif {
  z-index: 10;
  opacity: 1;
  transition: 1s;
}

Абсолютным позиционированием и координатами задаю нужное положение гифки. Но при изменении размеров самой гифки (в html) она начинает смещаться. Подскажите, пожалуйста, как сделать так, чтобы независимо от размеров самой гифки, она появлялась в одном и том же месте относительно своего родителя?

Answer 1

[maximw]

.gif {
position: relative;
opacity: 0;
top: -90px;
left: 120px;
}