Использование перехода в абсолютное положение при наведении - PullRequest
Новая
       7

Использование перехода в абсолютное положение при наведении

0 голосов
/ 04 мая 2018

Я пытаюсь получить переходную анимацию на 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;
}

Ответы [ 2 ]

0 голосов
/ 04 мая 2018 
.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;
}
0 голосов
/ 04 мая 2018

Вместо использования свойства 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>
...