我想在不改变Bootstrap位置的情况下叠加2 img,实际上目前这是我叠加两张图片时的部分:
当我悬停时,使用jQuery显示第二个img:
但我想像Bootstrap(我使用的是.col-md-3)那样做这个位置:
以下是HTML代码:
<section id="service">
<div class="row">
<div class="wow fadeInLeft title" align="center">
We provide
</div>
<div class="col-md-3 wow fadeIn insurance" align="center">
<img class="bottom" src="img/insurancehovr.png" alt="insurancehovr">
<img class="top" src="img/insurance.png" alt="insurance">
<div class="wow fadeInDown insurancetxt" align="center">
<p>INSURANCE</p>
</div>
</div>
<div class="col-md-3 wow fadeIn quality" align="center">
<img src="img/quality.png" alt="quality">
<div class="wow fadeInDown qualitytxt" align="center">
<p>QUALITY</p>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-3 wow fadeIn fast" align="center">
<img src="img/fast.png" alt="fast">
<div class="wow fadeInDown fasttxt" align="center">
<p>DELIVERY FAST</p>
</div>
</div>
<div class="col-md-3 wow fadeIn support" align="center">
<img src="img/support.png" alt="support">
<div class="wow fadeInDown supporttxt" align="center">
<p>SUPPORT</p>
</div>
</div>
</div>
</section>
这是CSS代码:
/* Insurance Hover */
#service .insurance {
position:relative;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
zoom: 90%;
padding-top: 50px;
font-size: 30px;
}
#service .insurancetxt {
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
-o-animation-delay: 1.8s;
-ms-animation-delay: 1.8s;
-webkit-transition: opacity 0.15s ease-in-out;
-moz-transition: opacity 0.15s ease-in-out;
-o-transition: opacity 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out;
color: #979696;
font-size: 27px;
padding-top: 10px;
}
#service .insurance img {
position:absolute;
left:0;
-webkit-transition: opacity 0.10s ease-in-out;
-moz-transition: opacity 0.10s ease-in-out;
-o-transition: opacity 0.10s ease-in-out;
transition: opacity 0.10s ease-in-out;
}
#service img.bottom {
opacity: 0;
}
这是jQuery代码:
$(".top").mouseenter(function()
{
$(this).fadeTo(0.05, 0);
$(".bottom").fadeTo(0.10, 1);
$(".insurancetxt").css('color', 'white');
});
$(".top").mouseleave(function()
{
$(this).fadeTo(0.10, 1);
$(".bottom").fadeTo(0.05, 0);
$(".insurancetxt").css('color', '#979696');
});