如何在不改变Bootstrap位置的情况下叠加2 img

时间:2015-07-14 12:46:48

标签: javascript jquery html css twitter-bootstrap

我想在不改变Bootstrap位置的情况下叠加2 img,实际上目前这是我叠加两张图片时的部分:

Insurance

当我悬停时,使用jQuery显示第二个img:

Hover

但我想像Bootstrap(我使用的是.col-md-3)那样做这个位置:

Insurance normal

以下是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');
});

0 个答案:

没有答案