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>