Question

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

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，如下所示。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

.profile__container {
  display: block;
  height: 100%;
  width: 100%;
}

div.profile__button, div.profile__button:hover {
  display: inline-block;
  padding: 70px 15px 15px;
  text-transform: capitalize;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

div.profile__button {
  background: linear-gradient(to bottom, transparent 0%, #08ca77 30%);
  opacity: 1;
}

div.profile__button:hover {
  background: linear-gradient(to bottom, transparent 0%, #08ca77 90%);
  opacity: 0.5;
}

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

2 个答案: