CSS: анимированная кнопка отображается только при наведении на изображение

Question

Я хочу создать кнопку, которая изначально скрыта, но затем отображается над изображением, когда изображение наведено. Я хочу, чтобы кнопка анимировалась от верхней части изображения (изначально скрытой) до середины (отображается при наведении курсора). Вот пример, прокрутите до раздела «последние новости из блога» и наведите курсор на изображение .

Проблемы, с которыми я столкнулся:

1. Я хочу, чтобы кнопка полностью скрывалась, когда изображение не наведено. Установка непрозрачности на ноль не полностью скрывает ее, и если пользователь наводит курсор на скрытую кнопку, он дергается.

2. Если пользователь наводит курсор на изображение, кнопка анимируется вниз над изображением, как должно. Я хочу, чтобы он оживил и исчез, когда пользователь перестанет зависать.

3. Я использовал CSS фильтр и переход, чтобы затемнить изображение при наведении курсора. Когда кнопка анимируется вниз над изображением при наведении, изображение по-прежнему темное, как и должно быть, но когда пользователь наводит курсор мыши непосредственно над вновь отображаемой кнопкой, изображение возвращается к нормальной яркости. Я хочу, чтобы изображение оставалось темным (как в примере), когда пользователь находится непосредственно над кнопкой.

Вот мой код . Как сделать эффект наведения кнопки таким же, как в первом примере, который я показал?

Answer 1

Вы должны действительно показать нам код без реакции, так как это будет намного проще для всех проверять и отлаживать. Несмотря на это, я пошел к вашему источнику и скопировал все CSS, использованные из данного контента. Все это активируется при наведении на div.entry-image-attachment.

Pure 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>