在悬停时使用转换到绝对位置

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>