Css image animation malfunction - html

Question

.demo-3 {
margin-top: 25px;
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
float: left;
margin-right: 20px
}
.demo-3 figure {
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
margin-left: -250px
}
.demo-3 figure img {
display: block;
position: relative;
z-index: 10;
margin: -150px 0;
}
.demo-3 figure figcaption {
display: block;
position: absolute;
z-index: 5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.demo-3 figure h2 {
font-family: 'Lato';
color: #fff;
font-size: 20px;
text-align: left
}
.demo-3 figure p {
display: block;
font-family: 'Lato';
font-size: 12px;
line-height: 18px;
margin: 0;
color: #fff;
text-align: left;
}
.demo-3 figure figcaption {
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 29px 44px;
background-color: rgba(26, 76, 110, 0.5);
text-align: center;
backface-visibility: hidden;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s
}
.demo-3 figure img {
backface-visibility: hidden;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s
}
.demo-3 figure:hover img,
figure.hover img {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.demo-3 figure:hover figcaption,
figure.hover figcaption {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0)
}
<figure>
<img src="D:\\ps\Notepad++\preview.jpg" alt="" />
<figcaption>
<h2>This is a cool title!</h2>
<p>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.</p>
</figcaption>
</figure>
</li>
</ul>
I saw this image animation on the internet and thought it was perfect for my idea. The problem was that the image was not positioned correctly in the box so i did some changes in the css code. Now that the image is aligned properly the text which was supposed to be on the back side of the picture got vanished because of the changes i did in the margin property. This is the url of the image if you need to see the original image (http://creativenerds.co.uk/wp-content/uploads/2015/08/wet-ink.jpg). Any help will be highly appreciated. Thanks :)