Как сделать добавление текста при наведении на блок?

Question

Как сделать так , чтобы при наведении на блок при помощи hover добавлялся текст, то есть допустим навел я на первый блок курсор, в нем добавился любой текст , убрал курсор с блока , осталась только картинка и последний вопрос , как сделать так , чтобы когда я отводил курсор от блока, чтобы он не резко уменьшался , а приблизительно так же как когда я навел на него ?

.main__doors-fade {
               display: flex;
               align-items: center;
               margin-left: auto;
}
    .fade-first {
                      width: 64px;
                      height: 60px;
                      background: rgba(0, 0, 0, 0.5);
                      border-radius: 30px 0px 0px 30px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
    }
    .fade-first-img {
                         width: 36px;
                         height: 36px;
    }
    .fade-first:hover {
                         display: flex;
                         align-items: center;
                         width: 380px;
                         background: linear-gradient(273.36deg, rgba(255, 0, 0, 0.6) 0%, rgba(255, 138, 0, 0.6) 100%);
                         transition: .8s;
    }
    .fade-second {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 66px;
                      height: 60px;
                      background: rgba(0, 0, 0, 0.5);
                      margin-left: 6px;
    }
    .fade-second-img {
                         width: 36px;
                         height: 36px;
                      }
    .fade-second:hover {
                         width: 526px;
                         background: linear-gradient(93.36deg, rgba(0, 117, 255, 0.6) 0%, rgba(128, 0, 255, 0.6) 100%);
                         transition: .8s;
                         display: flex;
                         align-items: center;
    }
    .fade-third {
                      width: 64px;
                      height: 60px;
                      background: rgba(0, 0, 0, 0.5);
                      border-radius: 0px 30px 30px 0px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      margin-left: 6px;
}
.fade-third-img {
                         width: 36px;
                         height: 36px;
                      }
.fade-third:hover {
                         width: 395px;
                         background: linear-gradient(93.36deg, rgba(17, 176, 52, 0.6) 0%, rgba(158, 255, 0, 0.6) 100%);
                         transition: .8s;
                         display: flex;
                         align-items: center;
                      }
                   }

<div class="main__doors-fade">
      <div class="fade-first"><img src="./img/lock.svg" class="fade-first-img"></div>
      <div class="fade-second"><img src="./img/people.svg" class="fade-second-img"></div>
      <div class="fade-third"><img src="./img/unlock.svg" class="fade-third-img"></div>
 </div>

Answer 1

Чтобы изменялся блок плавно - используй CSS анимации. Вот пример для одного элемента:

.fade-first {
            background: rgba(0, 0, 0, 0.5);
            width: 64px;
         height: 60px;
         border-radius: 30px 0px 0px 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         animation-name: slidein;
         animation-duration: 1s;
         animation-timing-function: ease;
      }

      .fade-first:hover {
            background: linear-gradient(273.36deg, rgba(255, 0, 0, 0.6) 0%, rgba(255, 138, 0, 0.6) 100%);
            width: 380px;
         animation-name: slideout;
         animation-duration: 1s;
         animation-timing-function: ease;
      }

      @keyframes slideout {
         from {
            background: rgba(0, 0, 0, 0.5);
            width: 64px;
         }

         to {
            background: linear-gradient(273.36deg, rgba(255, 0, 0, 0.6) 0%, rgba(255, 138, 0, 0.6) 100%);
            width: 380px;
         }
      }

      @keyframes slidein {
         from {
            background: linear-gradient(273.36deg, rgba(255, 0, 0, 0.6) 0%, rgba(255, 138, 0, 0.6) 100%);
            width: 380px;
         }

         to {
            width: 64px;
            background: rgba(0, 0, 0, 0.5);
         }
      }

Либо для обоих состояний укажи параметр CSS transition: width 1s;

.fade-first {
            background: rgba(0, 0, 0, 0.5);
            width: 64px;
         height: 60px;
         border-radius: 30px 0px 0px 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: width 1s;
      }

      .fade-first:hover {
            background: linear-gradient(273.36deg, rgba(255, 0, 0, 0.6) 0%, rgba(255, 138, 0, 0.6) 100%);
            width: 380px;
            transition: width 1s;
      }

Чтобы изменять содержимое - используй JavaScript, через события элемента: object.onmouseover = function(){myScript}; для рекции на наведения курсора и object.onmouseleave = function(){myScript}; для реакции, когда курсор покинул область.

Answer 2

Как вариант использовать

opacity, font-size, transition, transform

для простых анимаций

.main__doors-fade {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.fade-first {
  width: 64px;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 30px 0px 0px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.6s;
}

.fade-first-img {
  width: 36px;
  height: 36px;
}

.fade-first:hover {
  display: flex;
  align-items: center;
  width: 380px;
  background: linear-gradient(273.36deg, rgba(255, 0, 0, 0.6) 0%, rgba(255, 138, 0, 0.6) 100%);
  transition: .8s;
}

.fade-first:hover .text {
 opacity: 1;
  transform: translateY(0);
  font-size: 16px;
}

.text {
  opacity: 0;
  font-size: 0;
  transition: 0.4s;
  transform: translateY(20px)
}

<div class="main__doors-fade">
      <div class="fade-first">
        <img src="https://cdn.pixabay.com/photo/2017/11/09/21/41/cat-2934720__340.jpg" class="fade-first-img">
         <span class="text">TEXT</span>
  </div>
 </div>

БЛОГ НА HUSL

Как сделать добавление текста при наведении на блок?

Ответы (2 шт):