jquery - 动画加图标 Bootstrap 从底部到中心到 div

Question

我有一个带有图像的框和一个将图像不透明度设置为 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;
    }

谢谢。

Answer 1

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>