Css3转换不适用

Question

我试图实现this。 平滑的悬停动画未应用，并且图像在Chrome中超出div（如图中所示）。

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;
}

我在这里缺少什么？

Answer 1

您的代码无效，因为Tympanus为非触控设备编写了样式。它由mordernizr定义（自动将类添加到body）。

我修改了小提琴。现在它的工作正常。 的 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;
}