懸停框架的圖像與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動畫

回答

相關問題