Html Code: Figure Thumbnail with Caption and Sliding Description

You aren't forced to put all things directly on the eyes of the visitors in your website. For example, if you have a thumbnail, just put a caption on it and hide the description. You can design a button which slides the description in and out. See below to figure out how it works!
<!-- this script got from www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Pacifico|Poppins:400,700'>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  transition: 1s cubic-bezier(0.59, -0.43, 0.17, 1.16);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  perspective: 800px;
  background: #f7f1e3;
}

figure {
  width: 350px;
  box-shadow: 3px 3px 40px 0 rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  position: relative;
  pointer-events: none;
  background: #ecf0f1;
  transition: 0.3s ease-in-out;
}
figure .img {
  width: 100%;
  height: 200px;
  border-radius: 8px 8px 0 0;
  background: url("https://www.htmlbestcodes.com/images/caucasian-mountain-shepherd-4-809x508.jpg");
  background-size: 350px auto;
  background-repeat: no-repeat;
}
figure .img:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(transparent, #ecf0f1 44%);
  border-radius: 0 0 8px 8px;
}
figure figcaption {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  overflow: visible;
  background: #ecf0f1;
  border-radius: 0 0 8px 8px;
}
figure figcaption span {
  width: 100%;
}
figure figcaption span:nth-child(1) {
  position: absolute;
  font-family: "Pacifico", cursive;
  font-size: 30px;
  top: 0;
  opacity: 0;
  left: 0;
  color: #2c3e50;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
figure figcaption span:nth-child(2) {
  filter: url("#outline");
  font-family: "Pacifico", cursive;
  font-size: 52px;
  overflow: visible;
  position: absolute;
  top: -42px;
  left: -48px;
  white-space: nowrap;
  color: #2c3e50;
  z-index: 10;
  transform: rotate(-2deg);
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  transition: top 0.3s ease-in-out;
}
figure figcaption span:nth-child(3) {
  opacity: 0;
  padding: 0 20px;
  height: 20px;
  overflow: hidden;
  cursor: text;
}
figure button {
  position: absolute;
  bottom: -10px;
  width: 130px;
  left: calc(50% - 65px);
  background: #2c3e50;
  color: #fff;
  border: 0;
  height: 35px;
  border-radius: 4px;
  transform: rotate(1deg);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s ease-in-out;
  overflow: hidden;
  z-index: 20;
}
figure button:focus {
  outline: 0;
}
figure button:before {
  content: "more";
  position: absolute;
  top: 8px;
  left: 44px;
  opacity: 1;
  transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
}
figure button:after {
  content: "back";
  opacity: 0;
  top: 8px;
  left: 0;
  position: absolute;
  transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
}
figure:hover {
  transition: 0.3s ease-in-out;
  transform: rotateX(-2deg);
  box-shadow: 3px -3px 40px 0 rgba(0, 0, 0, 0.4);
}
figure:hover button {
  background: #4f6780;
  bottom: -13px;
  transition: 0.3s ease-in-out;
}
figure:hover span:nth-child(2) {
  top: -39px;
  transition: top 0.3s ease-in-out;
}
figure.open .img {
  height: 0;
}
figure.open figcaption {
  height: 280px;
  border-radius: 8px;
}
figure.open figcaption span:nth-child(1) {
  top: -25px;
  opacity: 1;
}
figure.open figcaption span:nth-child(2) {
  top: -18px;
}
figure.open figcaption span:nth-child(3) {
  height: 100%;
  opacity: 1;
  padding: 80px 20px 40px 20px;
}
figure.open button:before {
  opacity: 0;
  left: 100%;
}
figure.open button:after {
  opacity: 1;
  left: 47px;
}
figure.open:hover figcaption span:nth-child(2) {
  top: -15px;
  transition: top 0.3s ease-in-out;
}
figure svg {
  position: absolute;
  bottom: 0;
  width: 350px;
}
</style>

<figure>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="outline" mask="url(#mask)">
<feFlood flood-color="#ecf0f1" result="base" />
<feMorphology in="SourceGraphic" operator="dilate" radius="10" />
<feComposite in="base" operator="in" />
<feBlend in="SourceGraphic" mode="normal" />
<feDropShadow stdDeviation="6" />
</filter>
</defs>
</svg>
<div class="img"></div>
<figcaption>
<span>The</span>
<span>Caucasian Shepherd </span>
<span>is a large breed of dog that is popular in Russia, Armenia, Azerbaijan, and Mexico. It is extremely popular in Georgia, which has always been the principal region of penetration of Caucasian shepherd dogs.</span>
</figcaption>
<button></button>
</figure>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js">
$("button").click(function () {
  $("figure").toggleClass("open");
});
</script><a target='_blank' href='http://www.htmlbestcodes.com/' style='font-size: 8pt; text-decoration: none'>HTML Codes</a>
If you don't know how to use this code or need more information Click here!
Html Best Codes

Html Code: Figure Thumbnail with Caption and Sliding Description

Links
