当我悬停 img 标签以在他下方显示文本时如何制作动画

Question

I need to make animation when I hover img tag to show text under him (must be animate showing text, slowly) but that is not all It must also move other content down when text show and to return when text is gone (when is not hover). Very Important showing text must be animate and going back. I don't care if it works with jq or css or both just need work. I am a beginner so maybe it is obviously I just don't see it.

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

Use .class:hover

Basically, when .image is hovered, we want to change the styles of .text . The CSS query .image:hover + .text selects the .text the element where there is an image that is being hovered right before it.

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