Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/xamarin/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css3转换不适用_Css - Fatal编程技术网

Css3转换不适用

Css3转换不适用,css,Css,我正在努力实现。 不应用平滑悬停动画,图像上升到Chrome中的div之外(如图所示) ASPX: <div class="favDiv"> <table width="100%" cellspacing="15"> <tr> <td width="30%"> <div class="grid effect"> <figure> <asp:Image ID="img" run

我正在努力实现。 不应用平滑悬停动画,图像上升到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>
.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;
}

我在这里遗漏了什么?

您的代码不起作用,因为Tympanus为非触摸设备编写了样式。它由mordernizr(自动将类添加到主体)定义

我修改了小提琴。现在它可以正常工作了。

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>

为什么我试图理解问题出在哪里,但把代码放在jsfiddle中却很模糊我需要网格li吗?另外,我需要,我所有的td都只有150px高,宽度可能会有所不同。图像将填充整个td。在选择图片时,有什么需要记住的吗?任何原因,你都有70%的td,而不是30,70%?只是为了让图片更大。如果您只需要这么大的宽度,那很好。@Surjith。非常感谢您。
.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;
}