Css3 transform not applying - css

Question

I m trying to achieve this.
The smooth hover animation is not applied and the image goes up beyond the div (as shown in pic) in Chrome.
ASPX:
<div class="favDiv">
<table width="100%" cellspacing="15">
<tr>
<td width="30%">
<div class="grid effect">
<figure>
<asp:Image ID="img" runat="server" width="100%" height="150px"
Imageurl="~/abc.jpg"/>
<figCaption>
<h5>Test</h5>
</figCaption>
</figure>
</div>
</td>
<td width="70%"></td>
</tr>
</table>
</div>
CSS:
.favDiv
{
//to centre div in the page
display:inline-block;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
width:65%;
height:65%;
margin:auto;
}
.grid
{
border:1px solid gray;
height:150px;
}
figure
{
padding:0;
margin:0;
position:relative;
}
figCaption
{
position:absolute;
top:0;
left:0;
width:100%;
background:#2c3f52;
color:#ed4e6e;
}
figCaption h5
{
margin:0;
padding:0;
color:#fff;
}
.effect figure
{
overflow:hidden;
}
.effect figure:hover img
{
-webkit-transform:translateY(-50px);
-moz-transform:translateY(-50px);
}
.effect figCaption
{
height:50px;
width:100%;
top:auto;
bottom:0;
opacity:0;
-webkit-transform:translateY(100%);
-moz-transform:translateY(100%);
-webkit-transition:transform 0.4s, opacity 0.1s 0.3s;
-moz-transition:transform 0.4s, opacity 0.1s 0.3s;
}
.effect figure:hover figCaption
{
opacity:1;
-webkit-transform:translateY(0px);
-moz-transform:translateY(0px);
-webkit-transition:transform 0.4s, opacity 0.1s 0.3s;
-moz-transition:transform 0.4s, opacity 0.1s 0.3s;
}
What am i missing here?

Answer 1

Your code is not working because Tympanus wrote styles for non-touch devices. Its defined by mordernizr (Automatically add class to body).
I have modified the fiddle. Now its working fine.
Working Demo
HTML
<div class="favDiv">
<table width="100%" cellspacing="15">
<tr>
<td width="70%">
<div class="grid cs-style-3">
<figure>
<img src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/3.png" alt="img03">
<figcaption>
<h3>test</h3>
</figcaption>
</figure>
</div>
</td>
<td width="70%"></td>
</tr>
</table>
</div>
CSS
.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.grid li {
display: inline-block;
width: 440px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
max-width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
.grid figcaption h3 {
margin: 0;
padding: 0;
color: #fff;
}
/* Caption Style 3 */
.cs-style-3 figure {
overflow: hidden;
}
.cs-style-3 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.cs-style-3 figure:hover img {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
.cs-style-3 figcaption {
height: 30px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-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;
}
.cs-style-3 figure:hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-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;
}
.cs-style-3 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}