Images Won't Flip - html

Question

Trying to create similar effect like this: http://callmenick.com/tutorial-demos/image-caption-reveal-on-hover/index-2.html
However i am stuck with my codes and it won't just flip perfectly.
here's my CSS:
/* Paragraphs and Heading 2 styling, change according to your needs */
.slide p, .slide h2 {
color:#ffffff;
padding:10px;
left: -20px;
top: 20px;
position: relative;
}
.slide p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin: 0;
}
.slide h2 {
font-size:20px;
line-height:24px;
margin: 0;
font-family:'Lato';
}
/* 1. Sliding Up */
.moveup img {
position: absolute;
left: 0;
top: -15px;
width: 100%;
/*Fit the image to its container. the aspect ratio is preserved; the image will not be distorted*/
cursor: pointer;
-webkit-transition: transform 2s ease-in-out;
-moz-transition: top .5s ease-in-out;
-o-transition: top 2s ease-in-out;
transition: transform .5s ease-in-out;
}
.slide:hover img{
-webkit-transform:rotateY(90deg);
backface-visibility:hidden;
/*set to a value to hide the whole image*/
padding-bottom:200px;
}
.slide:hover .a{
-webkit-transform:rotateY(360deg);
/*set to a value to hide the whole image*/
padding-bottom:200px;
}
.a{
transition:.5s ease-in;
}
Any idea which part I made wrong?
Here's the JSFIDDLE: http://jsfiddle.net/r26bz3xn/2/
Thanks for the help in advance!

Answer 1

If you're going to use that example, why not just use their structure? I will say that tutorial seemed to have left out quite a lot of styles that made this thing work. I wish I could explain better as to what you were doing wrong but I've added a working fiddle to the bottom and the code below:
HTML
<figure>
<img src="http://beautyblenderdupe.com/wp-content/uploads/2015/01/01.jpg" alt=""/>
<figcaption>
<h2>This is a cool title!</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</span>
</figcaption>
</figure>
CSS
.slide figure {
margin: 0;
position: relative;
}
.slide figure img {
display: block;
position: relative;
z-index: 10;
max-width: 100%;
height: auto;
}
.slide figure figcaption {
display: block;
position: absolute;
z-index: 5;
padding: 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.slide figure h2 {
font-family:'Lato';
color: #fff;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
margin-bottom: 10px;
}
.slide figure span {
display: block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin: 0;
color: #FFF;
}
.slide figure figcaption {
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(26, 76, 110, 0.5);
text-align: center;
backface-visibility: hidden;
transform: rotateY(-180deg);
transition: all 0.5s;
}
.slide figure figcaption h3 {
margin-top: 150px
}
.slide figure img {
backface-visibility: hidden;
transition: all 0.5s;
}
.slide figure:hover img,
#effect-2 figure.hover img {
transform: rotateY(180deg);
}
.slide figure:hover figcaption,
#effect-2 figure.hover figcaption {
transform: rotateY(0);
}`enter code here`
FIDDLE