@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) она начинает смещаться. Подскажите, пожалуйста, как сделать так, чтобы независимо от размеров самой гифки, она появлялась в одном и том же месте относительно своего родителя?
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы