悬停框架的图像与CSS动画

我想制作一个动画的框架，应该出现在悬停使用CSS。我已经设法得到了与动画，但不幸的是我似乎无法得到这到不同的图像。梦想是能够将这些代码放在任何大小的图像上并使其工作。请帮助，谢谢。悬停框架的图像与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>

来源

2014-10-30 DG-UXD

这是你在找什么？

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/

来源

2014-10-30 09:04:56 kaaai3

这是有道理的。我会在那之前给予欢呼 – 2014-10-30 19:47:24

悬停框架的图像与CSS动画

回答

相关问题