在圖像懸停上垂直居中和動畫圖標

我在垂直居中圖標時出現垂直居中的圖標懸停，並且我試圖緩解其下拉。目前，它正在走下坡路，但無論我設置了哪些過渡屬性（緩解，緩解等），它都不會改變。在圖像懸停上垂直居中和動畫圖標

<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%; 
    } 
}

來源

2016-04-26 Ivan Topić

Chnage過渡到像'轉型：所有的0.5秒輕鬆; '......如果速度太快，請延長時間。 –

幾件事情。

這個圖標即將來臨。你真的不需要將它發送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>

來源

2016-04-26 15:10:02

你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

來源

2016-04-26 15:07:08

在圖像懸停上垂直居中和動畫圖標

回答

相關問題