Animation 使用css动画在图像上悬停帧_Animation

Animation 使用css动画在图像上悬停帧

animation

Animation 使用css动画在图像上悬停帧,animation,Animation,我试图产生一个动画帧，应该出现在悬停使用css。我已经成功地制作了动画，但不幸的是，我似乎无法将其应用到不同的图像上。我们的梦想是能够将此代码放置在任何大小的图像上并使其正常工作。需要帮助，谢谢 <style type="text/css"> figure { position: relative; float: left; overflow: hidden; margin: 10px; width:300px; height: 220px; background-color: #

我试图产生一个动画帧，应该出现在悬停使用css。我已经成功地制作了动画，但不幸的是，我似乎无法将其应用到不同的图像上。我们的梦想是能够将此代码放置在任何大小的图像上并使其正常工作。需要帮助，谢谢

<style type="text/css">
figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px;
width:300px;
height: 220px;
background-color: #333;
text-align: center;
}
figure.effect :before,
figure.effect :after {
position: absolute;
content: '';
opacity: 0;
}
figure.effect :before {
 top: 50px;
 right: 30px;
 bottom: 50px;
left: 30px;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 -webkit-transform: scale(0,1);
transform: scale(0,1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
figure.effect :after {
 top: 30px;
 right: 50px;
 bottom: 30px;
left: 50px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
figure.effect :before,
figure.effect :after {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect:hover :before,
figure.effect:hover :after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect:hover:after{
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
} 
</style>
<body>
<img src="mobile.jpg">
<figure class="effect">
    <figcaption>
        <a href="work.html"></a>
    </figcaption>           
</figure>
</body>


身材{
位置：相对位置；
浮动：左；
溢出：隐藏；
利润率：10px；
宽度：300px；
高度：220px；
背景色：#333；
文本对齐：居中；
}
图1.影响：之前，
图1.影响：之后{
位置：绝对位置；
内容：''；
不透明度：0；
}
图1.影响：之前{
顶部：50px；
右：30px；
底部：50px；
左：30px；
边框顶部：1px实心#fff；
边框底部：1px实心#fff；
-webkit变换：比例（0,1）；
变换：比例（0,1）；
-webkit转换原点：0；
变换原点：0；
}
图1.影响：之后{
顶部：30px；
右：50px；
底部：30px；
左：50px；
右边框：1px实心#fff；
左边框：1px实心#fff；
-webkit变换：比例（1,0）；
变换：比例（1,0）；
-webkit转换来源：100%0；
变换原点：100%0；
}
图1.影响：之前，
图1.影响：之后{
-webkit转换：不透明度0.35s，-webkit转换0.35s；
过渡：不透明度0.35s，变换0.35s；
}
图.效果：悬停：在，
图.效果：悬停：之后{
不透明度：1；
-webkit转换：规模（1）；
变换：比例（1）；
}
图.效果：悬停：之后{
-webkit转换延迟：0.15s；
过渡延迟：0.15s；
}

这就是你要找的吗

html

<div class="image"><!-- image can be placed here -->
<div class="imagehover">text
</div></div>

.image {    
width: 400px;
height: 400px;
background-color: red;
line-height: 400px;
}
.imagehover{
width: 400px;
height: 400px;
background:; 
opacity:0;
text-align: center;
font-size:20px;
transition: 0.2s ease-in-out;
}
.image:hover .imagehover { 
transition: 0.2s;
opacity:1;
background-color: rgba(0, 0, 0, 0.5);
text-align:justify; 
color:white;
font-size:25px; 
font-weight:700; 
font-family: "apercu",Helvetica,Arial,sans-serif; 
text-align: center;
line-height: 400px;
}