Play and stop gifs on hover and click

index.html

<div class="wrapper">
  <section>
    <img id="pic-hover" src="http://2.1m.yt/lk_RrC8qV.png" />
    <img id="gif-hover" src="https://media.giphy.com/media/3o8dp3TMpRhwcpgc7e/giphy.gif" />
    <button id="hover">Hover</button>
  </section>

  <section>
    <img id="pic-click" src="http://2.1m.yt/lk_RrC8qV.png" />
    <img id="gif-click" src="https://media.giphy.com/media/3o8dp3TMpRhwcpgc7e/giphy.gif" />
    <button id="click">Click</button>
  </section>
</div>

play-and-stop-gifs-on-hover-and-click.markdown

Play and stop gifs on hover and click

A Pen by Mehmet Burak Erman 🦌 on CodePen.

License.

script.js

$(function() {
  $('#gif-hover').hide();
  $('#hover').on("mouseover", function() {
    $('#hover').hide();
    $('#gif-hover').show();
    $('#pic-hover').hide();
  });

  $('#gif-hover').on("mouseout", function() {
    $('#hover').show();
    $('#gif-hover').hide();
    $('#pic-hover').show();
  });

  $('#gif-click').hide();
  $('#click').click(function() {
    $('#click').hide();
    $('#gif-click').show();
    $('#pic-click').hide();
  });

  if ($('#click').data("clicked", true)) {
    $('#gif-click').click(function() {
      $('#click').show();
      $('#gif-click').hide();
      $('#pic-click').show();
    });
  }

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background: #1a1a1a;
}

#pic-hover {
  position: relative;
  width: 300px;
  height: 300px;
  top: 60px;
  display: inline-block;
}

#gif-hover {
  position: relative;
  width: 300px;
  height: 300px;
  top: 60px;
  display: inline-block;
}

#hover {
  position: absolute;
  left: 50%;
  margin-left: -185px;
  top: 180px;
  width: 70px;
  height: 50px;
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
  font-weight: bold;
}

#pic-click {
  position: relative;
  width: 300px;
  height: 300px;
  top: 60px;
  display: inline-block;
  margin-left: 5px;
}

#gif-click {
  position: relative;
  width: 300px;
  height: 300px;
  top: 60px;
  display: inline-block;
  margin-left: 5px;
}

#click {
  position: absolute;
  left: 50%;
  margin-left: 120px;
  top: 180px;
  width: 70px;
  height: 50px;
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
  font-weight: bold;
}

.wrapper {
  display: flex;
  height: auto;
  justify-content: center;
}