<figure>
						<div><img src="https://image.ibb.co/j5UTBV/img1.jpg" alt="img04"></div>
						<figcaption>
							<h3>Safari</h3>
							<span>Jacob Cummings</span>
							<a href="#">Take a look</a>
						</figcaption>
					</figure>
figure {
	  margin: 0;
  	max-width: 400px;
    position: relative;
	  font-family: 'Open sans';
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}
figcaption,figcaption h3 ,figcaption p,img{
	    -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    -o-transition: all .9s ease;
    -ms-transition: all .9s ease;
    transition: all .9s ease;
	    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -ms-transition-delay: .5s;
    transition-delay: .5s;
}
figure div{
	overflow: hidden;
}
img{
	  -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}
figcaption {
	  position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
    height: 261px;
    width: 50%;
	max-height: 300px;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
}
figcaption h3,figcaption p{
	padding: 10px 20px;
}
figcaption h3 {
    color: #fff;
    font-size: 30px;
}
figcaption a {
    text-align: center;
    padding: 5px 10px;
    border-radius: 2px;
    display: inline-block;
    background: #ed4e6e;
    color: #fff;color: #fff;
    border: 2px solid #fff;
    padding: 4px 10px;
    text-decoration: none;
	  background: transparent;
  	position: absolute;
    bottom: 20px;
    right: 20px;
}
figure:hover figcaption {
     opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}
figure:hover img{
	-webkit-transform: translateX(25%);
  -moz-transform: translateX(25%);     
	-ms-transform: translateX(25%);
  transform: translateX(25%);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.