Html Code: Auto Writing Caption for Figures Thumbnails

And again another dynamic text effect, this time for the figures captions. By using the following code, the images captions are written automatically when they are hovered. Beside it is beautiful and attractive. it leads user to spend more time on each image to see what is going on!

<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/images/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>

If you don't know how to use this code or need more information Click here!

Html Best Codes

Html Code: Auto Writing Caption for Figures Thumbnails

Links