我想创建一个最初隐藏的按钮，但在图像悬停时显示在图像上。我希望按钮从图像顶部(最初隐藏(到中间(悬停时显示(进行动画处理。这是一个示例，滚动到"来自博客的最新"部分并将鼠标悬停在图像上。
我遇到的问题：
-
我希望在图像未悬停时完全隐藏按钮。将不透明度设置为零不会完全隐藏它，如果用户将鼠标悬停在隐藏的按钮上，它会抽搐。
-
如果用户将鼠标悬停在图像上，则按钮将像应有的方式向下动画化。我希望它在用户停止悬停时重新制作动画并消失。
-
我使用了CSS过滤器和过渡来使悬停时的图像变暗。当悬停时按钮在图像上向下动画时，图像仍然像应有的那样暗，但是当用户直接将鼠标悬停在新显示的按钮上时，图像将恢复到正常亮度。我希望当用户直接在按钮上方时，图像保持黑暗(如示例中所示(。
这是我的代码。如何使此按钮悬停效果与我展示的第一个示例中完全相同？
你真的应该向我们展示代码而不做出反应，因为这对每个人来说都更容易检查和调试。无论如何，我去了你的源代码，并从给定的内容中复制了所有使用的 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>