Adding .gif Animations as a Text Hover Effect

 

This video shows you how to add a GIF animation when you hover over text – similar to Sebit Min. Copy and paste the HTML and CSS below!

Add the HTML below into a Code Block:

<div class="nav-gif-wrapper">
  <a href="http://www.google.com/">
   <h1>Hello, World!</h1>
   <img src="https://media.giphy.com/media/TeBpzQZRaBIC4/giphy.gif" alt="snoop-image" height="200" style="top:-55px; left: 15%;">
   </a>
</div>
   
<div class="nav-gif-wrapper">
  <a href="http://www.google.com/">
    <h1>This is another link</h1>
    <img src="https://78.media.tumblr.com/3d8e6485862e77b43afc2758d1628d83/tumblr_p4tnpuBBWn1rfjeqno1_1280.gif" alt="image" height="300" style="top:-58px; right: 5%;">
    </a> 
</div>

Add the CSS below into your Custom CSS:

.nav-gif-wrapper img {
  opacity: 0;
}
.nav-gif-wrapper:hover img {
  opacity: 1;
}
.nav-gif-wrapper img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
  display: block;
}
.nav-gif-wrapper img {
  position: absolute;
}
Code SnippetsPunoSection 3 - Custom Sites