Edit in JSFiddle

$(document).ready(function() {
  $(".hover-zone").hover(
    function() {
    	var target = $(this).attr("data-target");
      var src = $('.' + target).attr("src");
      $('.' + target).attr("src", src.replace(/\.jpg$/i, ".gif"));
    },
    function() {
    	var target = $(this).attr("data-target");
      var src = $('.' + target).attr("src");
      $('.' + target).attr("src", src.replace(/\.gif/i, ".jpg"));
    });
});
<div class="hover-zone" data-target="mon-image1">
  <img class="mon-image1" src="http://thomasgiavarini.me/img/index/UX.jpg">
  <p>T'as vu ça sur mon site ?</p>
</div>

<div class="hover-zone" data-target="mon-image2">
  <img class="mon-image2" src="http://thomasgiavarini.me/img/index/UI.jpg">
  <p>T'as cru que c'était de lanimation HTML5 ?</p>
</div>

<div class="hover-zone" data-target="mon-image3">
  <img class="mon-image3" src="http://thomasgiavarini.me/img/index/HTML.jpg">
  <p>Ben non c'est un simple GIF fait maison ;)</p>
</div>
* {
  margin: 0;
  padding: 0;
}

body {
  background: aqua;
  padding: 30px;
}

p {
  font-family: roboto;
  font-size: 12px;
  line-height: 50px;
  text-align: center;
}

img {
  width: 100%;
  padding-top: 10px;
}

.hover-zone {
  display: block;
  padding: 8px;
  margin: 15px auto;
  max-width: 480px;
  background: white;
  transition: .3s;
}

.hover-zone:hover {
  box-shadow: 0 10px 60px 0 rgba(0, 0, 0, 0.1);
}