Наведите рамку на изображение с анимацией 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

Это имеет смысл. Я дам это тому назад ура –

Наведите рамку на изображение с анимацией css

ответ

Смежные вопросы