html - 在悬停时使用过渡到绝对位置

Question

我试图在悬停时在 DIV 上获得过渡动画。但是，它不起作用。我觉得我错过了什么!

JSFIDDLE DEMO

HTML

<div class="profile__container">
          <img src="http://i.imgur.com/SGw04SV.jpg" class="profile__list--resume img-fluid" />
          <div class="profile__button">
            <h2>Hello World</h2>
          </div>
        </div>

CSS:

.profile__button {
  display: none;
  background: linear-gradient(to bottom, transparent 0%, #08ca77 60%);
  padding: 120px 15px 15px;
  text-transform: capitalize;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.profile__container:hover .profile__button {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

Answer 1

不使用 display 属性，而是使用 opacity 和 visibility，如下所示。

.profile__button {
  background: linear-gradient(to bottom, transparent 0%, #08ca77 60%);
  padding: 120px 15px 15px;
  text-transform: capitalize;
  transition: .5s;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.profile__container:hover .profile__button {
  opacity: 1;
  visibility: visible;
}

<div class="profile__container">
          <img src="http://i.imgur.com/SGw04SV.jpg" class="profile__list--resume img-fluid" />
          <div class="profile__button">
            <h2>Hello World</h2>
          </div>
        </div>