CSS：仅在悬停图像时显示动画按钮

Question

我想创建一个按钮，该按钮最初是隐藏的，但是当鼠标悬停在图像上时会显示在图像上。我希望按钮从图像的顶部（最初隐藏）到中间（悬停时显示）进行动画处理。 Here is an example, scroll to the "latest from blog" section and hover the image。

我遇到的问题：

1. 当图像没有悬停时，我希望按钮完全隐藏。将不透明度设置为零并不能完全隐藏它，并且如果用户将鼠标悬停在隐藏的按钮上，它就会抽搐。

2. 如果用户将鼠标悬停在图像上，则按钮会像其应有的那样向下动画。我希望它可以动画备份，并在用户停止悬停时消失。

3. 我已经使用CSS过滤器和一个过渡来使悬停时的图像变暗。当按钮在悬停时在图像上向下动画时，图像仍然像应有的一样暗，但是当用户将鼠标悬停在新显示的按钮上时，图像将恢复为正常亮度。当用户直接在按钮上方时，我希望图像保持黑暗（如示例中所示）。

Here is my code。如何使按钮悬停效果与我在第一个示例中显示的完全一样？

Answer 1

您应该真正向我们展示代码而无需做出反应，因为这对于每个人来说都更容易检查和调试。无论如何，我去了您的源头，并从给定的内容复制了所有使用的CSS。将鼠标悬停在div.entry-image-attachment上时，所有这些都将激活。

纯CSS

#submit,
button,
.button,
input[type=submit] {
  border: 0;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  font-weight: 400!important;
  line-height: 1;
  margin: 0;
  position: relative;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding-top: .9375em;
  padding-right: 1.875em;
  padding-bottom: 1em;
  padding-left: 1.875em;
  font-size: .875em;
  background-color: #2ecc71;
  border-color: #2ecc71;
  transition: all .5s ease 0s;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  color: #fff;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.text-center {
  text-align: center!important;
}

.trans-button {
  background-color: transparent!important;
  font-weight: bolder;
  border-width: 1px;
  border-style: solid;
}

.entry-image {
  position: relative;
  margin: 10px 0 15px;
}

.nd-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.nd-content_inner {
  display: table;
  width: 100%;
  height: 100%;
}

.nd-content_inner1 {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}


.nd-title {
  position: relative;
  top: -150px;
  opacity: 0;
  margin: 0 0 30px;
  -webkit-transition: all .3s ease .01s;
  transition: all 1s ease .01s; /*Animation happens with this*/
}

.button.white.trans-button {
  color: #fff;
}

.entry-image-attachment:hover .nd-title {
  -webkit-transition: all .5s cubic-bezier(1, -.53, .405, 1.425) .01s;
  transition: all .5s cubic-bezier(1, -.53, .405, 1.425) .01s;
}

.entry-image-attachment:hover .nd-icon,
.entry-image-attachment:hover .nd-content,
.entry-image-attachment:hover .nd-title {
  opacity: 1;
  top: 0;
}

.button.trans-button {
  padding: 15px;
}

#submit.white,
button.white,
.button.white,
input[type=submit].white {
  background-color: #fff;
  border-color: #fff;
  transition: all .5s ease 0s;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  color: #333;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.entry-image-attachment:hover .nd-icon,
.entry-image-attachment:hover .nd-content,
.entry-image-attachment:hover .nd-title {
  opacity: 1;
  top: 0;
}

.entry-image-attachment:hover .nd-content {
  background: rgba(0, 0, 0, .5);
}
<div class="entry-image">
  <div class="entry-image-attachment" style="max-height:200px;overflow:hidden;">
    <img src="http://rosette.leetheme.com/wp-content/uploads/2014/12/02.jpg" width="296" height="180" />
    <div class="nd-content text-center">
      <div class="nd-content_inner">
        <div class="nd-content_inner1">
          <div class="button trans-button white nd-title"><span>Read more</span></div>
        </div>
      </div>
    </div>
  </div>
</div>