Наполовину показанный div скользит вверх при наведении

#html #css

#HTML #css

Вопрос:

В настоящее время я копирую этот код, который показывает скрытый div при наведении курсора мыши

но то, что я хочу, это что-то вроде этого

Чего я хочу, так это при наведении курсора мыши на заголовок в 1-м поле, показанном на 2-м рисунке, div, содержащий заголовок, будет скользить вверх и занимать все пространство, открывая другое содержимое под заголовком.

Может ли кто-нибудь порекомендовать мне учебник, подобный этому? Заранее спасибо 🙂

1. Что вы уже пробовали на своем примере? Вы пытались его немного изменить? Разместите свой код здесь, чтобы мы могли вам помочь.

2. В дополнение к тому, что сказал @threeFatCat, попробуйте подробнее объяснить ожидаемое поведение. Глядя только на изображение, непонятно, чего вы хотите.

3. Извините, я действительно плохо разбираюсь в css, поэтому я не слишком старался его модифицировать. Чего я хочу, так это чтобы при наведении курсора мыши на заголовок div, содержащий заголовок, скользил вверх и занимал все пространство, открывая другое содержимое под заголовком.

Ответ №1:

/ * попробуйте это */

 .container {
 position: relative;
 width: 50%;
 }

 .image {
 display: block;
 width: 100%;
 height: auto;
 }

 .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  overflow: hidden;
  width: 100%;
  height: 20%;
  transition: .5s ease;
  }

  .container:hover .overlay {
  height: 100%;
   }
   .container .text2{
   display:none;
    }
    .container:hover .text2{
    display:block;
   padding-top:30px;
     }

    .text {
      color: white;
       font-size: 20px;
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       text-align: center;
    }

   <h2>Slide in Overlay from the Bottom</h2>
   <p>Hover over the image to see the effect.</p>

   <div class="container">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
    <div class="overlay">
    <div class="text">Hello World

    <div class="text2"> content 1</div>
    </div>
     </div>
      </div>

Ответ №2:

Все, что вам нужно сделать, это изменить процент высоты поля наложения следующим образом..

 .container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 20%;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

 <!DOCTYPE html>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Развернуть фрагмент