CODEWITHSUNDEEP
javascripthtmlcss
fg2333
fg2333

Reputation: 5

How to make animation when I hover img tag to show text under him

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;
}

Upvotes: 0

Views: 554

Answers (1)

Jack
Jack

Reputation: 1999

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>

Upvotes: 2

Related Questions