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

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

Войти через центр авторизации
Похожие вопросы
29 мая 2020, в 22:25
6000 руб./за проект
29 мая 2020, в 21:01
4000 руб./за проект
29 мая 2020, в 20:53
1000 руб./за проект