Как сделать анимацию при наведении курсора на img для отображения текста под ним

Question

Мне нужно сделать анимацию при наведении курсора на тег img, чтобы показать текст под ним (должен быть анимирован, медленно отображать текст), но это еще не все. Также необходимо переместить другой контент вниз, когда текст отображается, и вернуться, когда текст пропал когда не паришь). Очень важно, чтобы показ текста был живым и возвращался. Мне все равно, если он работает с JQ или css, или оба просто нужно работать. Я новичок, так что, возможно, это, очевидно, я просто не вижу.

HTML:

    <div class="first-block"></div>
    <div class="secend-block">
        <div class="box">
            <img src="/Test/beach.jpg" alt="beach" width="200px" height="200px">
            <p>asdasdasssssssssssssssssssssss
                asdddddddddddddddddddddd
                asdaaaadsssssssssssadsadsdasd
                adsssssssssssssssssadsadsadsa
            </p>
        </div>
    </div>
    <div class="third-block">
        <h1>some content</h1>
        <h1>some content</h1>
        <h1>some content</h1>
        <h1>some content</h1>
    </div>

CSS:

 .first-block{
    width: 99%;
    height: 100px;
    background: #f10000;
}

.secend-block{
    width: 99%;
    height: auto;
    background: #ffffff;

}

.secend-block .box{
    width: 200px;
    padding-top: 10px;
    margin: 0px auto;
}

.secend-block .box p{
    display: none;
}

.third-block{
    width: 99%;
    height: auto;
    background: #4400ff;
}

Answer 1

Использовать .class:hover

Обычно, когда .image наведен, мы хотим изменить стили .text. CSS запрос .image:hover + .text выбирает .text элемент, где прямо перед ним находится изображение.

.image {
  width: 250px;
}

.text {
  max-height: 0px;
  overflow: hidden;
  
  transition: max-height 1s;
}

.image:hover + .text {
  max-height: 32px;
}

<div class="wrapper">
  <img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
  <p class="text">This is some text</p>
</div>

<div class="wrapper">
  <img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
  <p class="text">This is some text</p>
</div>