Figure Thumbnail with Caption and Sliding Description

Written by @kerixa 27 August 2020

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!

Code Snippet:

                                                
                                                <!-- this script is provided by 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='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best 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
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2