CPC: Figure & Figcaption

cpc-figure-figcaption.markdown

CPC: Figure & Figcaption

Figure with figcaption for blog post image. Smooth transition and clip path included.

A Pen by Kirill on CodePen.

License.

index.html

<div class="row">
  
<!-- single figure start -->
 <div class="col-md-4">
 <figure class="single bg">
 <img class="img-fluid"
  src="https://i.imgur.com/sXBHp40.jpg"
  alt="image">	
  <figcaption>Adorable Cat</figcaption>
</figure>
  </div><!-- col -->
<!-- single figure end-->
  
<!-- single figure start -->
 <div class="col-md-4">
 <figure class="single bg">
 <img class="img-fluid"
  src="https://i.imgur.com/d8hUyas.jpg"
  alt="image">	
  <figcaption>Avocado or Tomatoes?</figcaption>
</figure>
  </div><!-- col -->
<!-- single figure end-->
  
<!-- single figure start -->
 <div class="col-md-4">
 <figure class="single bg">
 <img class="img-fluid"
  src="https://i.imgur.com/cO3t2ND.jpg"
  alt="image">	
  <figcaption>Amazing Alps</figcaption>
</figure>
  </div><!-- col -->
<!-- single figure end-->
  
</div><!-- row -->

style.css

@import url('https://fonts.googleapis.com/css?family=Slabo+27px');

figure.single {
  position: relative;
  margin: 15px;
  width: 100%;
  text-align: center;
  background: #000000;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
figure.single figcaption {
  font-family: 'Slabo 27px', serif;
  position: absolute;
  padding:15px;
  top: 40%;
  left: 0;
  width:100%;
  color:#fff;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.single:before {
  background: rgba(9, 27, 39, .5);
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.single:hover:before {
  background: rgba(9, 27, 39, .1);
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.single:hover figcaption{
  color:#000;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-clip-path: polygon(100% 0, 100% 90%, 0 100%, 0 10%);
clip-path: polygon(100% 0, 100% 90%, 0 100%, 0 10%);
  position: absolute;
  top: 65%;
  left: 0;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
/* For Demo Use */
body {
  background-color: #ddd;
  text-align: center;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />