從底部到中心再到div的Animate plus圖標引導程序

Question

我有一個帶有圖像的框和一個將div的圖像不透明度設置為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 CODE（我嘗試過，但是效果不好）：

  $(".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>