Question

我正在尝试制作一个动画帧，它应该在使用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>

Answer 1

这就是你要找的东西吗？

HTML

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

CSS

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

http://jsfiddle.net/d6yhnmnf/5/

悬停框架与css动画的图像上

1 个答案: