SOURCE

<div class="container">
    <div class="box">
      <div class="thumbnail style1" 
           data-title="Dunizb"
           data-description="这世间唯有梦想和好姑娘不可辜负！  http://dunizb.com">
        <img src="http://szimg.mukewang.com/594b37170001cd6b05400300-360-202.jpg" alt="http://dunizb.com" />
      </div>
  </div>

  <div class="box">
    <div class="thumbnail style2" 
         data-title="Dunizb"
         data-description="这世间唯有梦想和好姑娘不可辜负！  http://dunizb.com">
      <img src="http://szimg.mukewang.com/594b37170001cd6b05400300-360-202.jpg" alt="http://dunizb.com" />
    </div>
  </div>
</div>

.container{
  /* display:flex; */
}
.box{
  width:360px;
  margin:10px auto;
}
.thumbnail{
  display: inline-block;
	position: relative;
  overflow: hidden;
	background: #000;
}
.thumbnail img {
	display: block;
	max-width: 100%;
	transition: opacity .2s ease-in-out;
}
.thumbnail:hover img {
	opacity: .5;
}
.thumbnail::after,
.thumbnail::before {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 50%;
	transition: transform .4s ease-out;
	color: #fff;
}
.thumbnail::after{
  content: attr(data-title);
	top: 0;
  background: rgba(0,0,0,.4);
	font-size: 3.5rem;
	font-weight: 300;
	text-align: center;
}
.thumbnail::before{
  content: attr(data-description);
	top: 50%;
	padding: 20px;
  background: rgba(107,38,68,.6);
	color: #f1f1f1;
	font-size: 1rem;
}
.style1::after {
	transform: translateX(-100%) scale(.8);
}
.style1::before {
	transform: translateX(100%) scale(.8);
}
.style2::after {
	transform: translateY(-100%);
}
.style2::before {
	transform: translateY(100%);
}
.thumbnail:hover::after,
.thumbnail:hover::before {
	transform: translateY(0%) scale(1);
}