Question

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

Redis::

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>

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

2 个答案: