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