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 定义(自动将类添加到主体)。

我修改了 fiddle 。现在它工作正常。<强> 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;
}