@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;
}