Auto Writing Caption for Figures Thumbnails

Written by @kerixa 27 August 2020

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!

Code Snippet:

                                                
                                                <!-- this script is provided by 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/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><a target='_blank' href='www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Prashanthcs11, Designer Diva, Jirgensons E, vamsi, wapmohin
advertisement 2