GIF On Image Hover

HTML

<!-- Don't do this:
<a href="../example.html" class="img-acu" title="ACU Project link"></a>
-->

<div>
  <div>Click on image below to go to link:</div>
  <a href="https://www.google.com" title="ACU Project link">
    <div class="img-acu"></div>
  </a>
</div>






CSS

.img-acu
{
  float: left;
  width: 250px;
  height: 132px;
  background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
  background-size: 125%;
}

.img-acu:hover
{
  background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}