图像悬停时垂直居中和动画图标

Question

我无法使图像悬停时掉落的图标垂直居中，我正在尝试缓和其下拉。目前它变得过于激进，但无论我设置什么过渡属性（缓和、缓出等）它都不会改变。

<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

您的 top 值高得离谱 ;)

只需将其更改为更合理的值以隐藏它，它应该对您有好处：

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

Answer 2

两件事。

该图标即将推出。你真的不需要将它发送到 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>

图像悬停时垂直居中和动画图标

Vertically centering and animating icon on image hover

html

css

position

css-transitions