我有一个带有图像的框和一个将图像不透明度设置为 0.7 的变暗 div,以便在悬停时应用深色背景,但我想在悬停时从底部到中心显示一个加号图标并带有动画。现在它只会淡入淡出,但我也想在悬停时从底部移动到中心。
HTML 代码:
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 paddinganuncios box">
<div class="headnaranja">
<h3><img class="calendar" src="images/trans.gif" alt="responsive" />28 Octubre 2014</h3>
</div>
<a href="#" class="darken">
<img src="images/b1.jpg" class="img-responsive b1" alt="B1 image">
<div class="overlay">
<div class="more">
<span class="glyphicon glyphicon-plus-sign plus-box" aria-hidden="true">
</span>
</div>
</div>
</a>
<div class="desc">Gran representación de Aje Extremadura en la 56 jornada corresponsables.
</div>
</div>
JQuery 代码(我试过了,但效果不佳):
$(".darken").hover(function(){
$(".plus-box").animate({
top: "-=30px",
}, 500 );
});
CSS 代码:
a.darken:hover img {
opacity: 0.7;
}
a.darken {
display: block;
background: black;
padding: 0;
}
.overlay {
opacity:0;
position: absolute;
top: 15%;
left: 44%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.box:hover {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.box:hover .overlay {
opacity:1;
}
.box:hover .b1 {
opacity: 0.5;
}
谢谢。
最佳答案
CSS 过渡不是您想要的吗?
a.darken:hover img {
opacity: 0.7;
}
.b1 {
vertical-align:middle;
display:inline-block!important;
}
a.darken {
display: block;
background: black;
padding: 0;
overflow:hidden;
}
div.overlay {
position:relative;
top:60%;
display:inline-block!important;
vertical-align:middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.box:hover {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.box:hover .overlay {
opacity:1;
top:0;
}
.box:hover .b1 {
opacity: 0.5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 paddinganuncios box">
<div class="headnaranja">
<h3><img class="calendar" src="images/trans.gif" alt="responsive" />28 Octubre 2014</h3>
</div>
<a href="#" class="darken">
<img src="http://lorempixel.com/400/100" class="img-responsive b1" alt="B1 image">
<div class="overlay">
<div class="more">
<span class="glyphicon glyphicon-plus-sign plus-box" aria-hidden="true"></span>
</div>
</div>
</a>
<div class="desc">Gran representación de Aje Extremadura en la 56 jornada corresponsables.
</div>
</div>
关于jquery - 动画加图标 Bootstrap 从底部到中心到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29048786/