<!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->

<style>
@import url("https://fonts.googleapis.com/css?family=Kalam");

figure {
  width: 85%;
  border: 2px silver solid;
  min-width: 250px;
  background-color: white;

  margin: 3% auto;
  padding: 15px;
}
img {
  width: 100%;
  display: block;

  box-shadow: 0px 0px 12px 3px silver;
}

body {
  backgroud-color: #191919;
  background-image: radial-gradient( #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%);

}
figcaption {
  font-family: "Kalam", cursive;
  height: 2.5em;

  font-size: 1.2em;

  margin: 0;
  padding: 5px;
}
.wiggle1 {
  animation: wiggle1 0.4s;
}
.wiggle {
  animation: wiggle 0.4s;
}
.wiggle2 {
  animation: wiggle2 0.4s;
}

@keyframes wiggle {
  0% {
    transform: rotate(3);
  }

  45% {
    transform: rotate(-3deg);
  }
  85% {
    transform: rotate(-1deg);
  }

  100% {
    transform: rotate(1deg);
  }
}

@keyframes wiggle1 {
  0% {
    transform: rotate(-3);
  }

  45% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(-1deg);
  }
}
@keyframes wiggle2 {
  0% {
    transform: rotate(1);
  }

  45% {
    transform: rotate(2deg);
  }
  85% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-1deg);
  }
}
@media only screen and (min-width: 636px) and (max-width: 960px) {
  figure {
    width: 40%;
    margin: 2%;
    float: left;
  }
  figcaption {
    font-size: 1.3em;
  }
}
@media only screen and (min-width: 961px) {
  figure {
    width: 27%;
    float: left;
    margin: 1% 1%;
  }
  figcaption {
    font-size: 1.4em;
  }
}
</style>

<figure class="wiggly wiggle2">
<img src="http://htmlfreecode.com/files/kandinsky.jpg" alt="Wassily Kandinsky: Untitled 1929">
<figcaption>Wassily Kandinsky: Park of St Cloud, 1906</figcaption>
</figure>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
function type($target) {
  //stop typing when hover is off//
  if ($target.Stop) {
    return;
  }
  if ($target.index < $target.caption.length) {
    $target.text($target.text() + $target.caption.charAt($target.index));

    $target.index++;

    setTimeout(function () {
      type($target);
    }, 100);
  }
}
$(document).ready(function () {
  var $figures = $(".wiggly");
  $figures.each(function () {
    let $figure = $(this);

    let $caption = $figure.find("figcaption");

    $caption.caption = $caption.text();
    $caption.index = 0;
    $caption.text("");
    $caption.Stop = false;
    let $img = $figure.find("img");
    $figure.hover(
    function (e) {
      $caption.Stop = false;
      type($caption);
    },
    function () {
      $caption.Stop = true;
      $caption.text("");
      $caption.index = 0;
    });

  });
});
</script><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>