イメージのホバー上に垂直にセンタリングされ、アニメーション化されたアイコン

Question

イメージのホバーにドロップするアイコンを垂直方向にセンタリングするのに問題があり、ドロップダウンを簡単にしようとしています。現在、それはあまりにも積極的に下がっていますが、私が設定したトランジションプロパティ（イージー、イージーアウトなど）に関係なく、変化しません。

https://jsfiddle.net/4br7sj0q/2/

<div class="fader"> 
    <a href="#"> 
     <img width="200" height="350" src="http://placehold.it/200x350"> 
     <span class="fa fa-search fa-3x"></span> 
    </a> 
</div> 




.fader { 
    position: relative; 
    span.fa { 
     position: absolute; 
     top: -9999px; 

     // center horizontal 
     margin-left: auto; 
     margin-right: auto; 
     left: 0; 
     right: 0; 

     transition: all 0.3s ease-out; 
    } 
    &:hover .fa { 
     top: 50%; 
    } 
} 

Answer 1

物事のカップル。

アイコンは大きく進んでいます。あなたは実際にそれを9999px離れて送信する必要はありません。オフスクリーンにするだけで十分です（または親に隠れたオーバーフローを適用してから、一番上の1emにすることができます）。

次に、トランジションをtransition: all 0.5s ease; ...のように変更してください。速すぎる場合は、時間を長くしてください。

イージング関数はease ... ease-out ...より自然に見えます。

最後に、あなたは半分それは独自の高さ

transform:translateY(-50%); 

li { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 
.fader { 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
} 
 
.fader img { 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    display: block; 
 
} 
 
.fader img:hover { 
 
    opacity: 0.5; 
 
} 
 
.fader span.fa { 
 
    color: #333; 
 
    position: absolute; 
 
    top: -1em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    left: 0; 
 
    right: 0; 
 
    -webkit-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 
.fader:hover .fa { 
 
    top: 50%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> 
 
<li> 
 
    <div class="fader"> 
 

 
    <a href="#"> 
 
     <img width="200" height="350" src="http://placehold.it/200x350"> <span class="fa fa-search fa-3x"></span> 
 
    </a> 
 
    </div> 
 

 
</li>

Answer 2

あなたtop値がめちゃくちゃ高いです;）

ちょうどそれを隠すために、よりreasonnable値に変更し、それはあなたのために良いことがあります：

span.fa { 
    color: #333; 
    position: absolute; 
    top: -60px; 
    margin-left: auto; 
    margin-right: auto; 
    left: 0; 
    right: 0; 
    transition: all 0.3s ease-out; 
} 

Fiddle