Search code examples
htmlcssstylesheetmousehover

Show content when hovering over DIV

Is it possible to show content when hovering over the DIV. See Image

When I hover over the div, the transition takes place, but is it possible to show content inside the hovering div, ie. Images etc

html :

<div class="flowingdown">

</div>

CSS3 :

.flowingdown {
    width:1045px;
    background-image:url(images/vertical_cloth.png);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0  55px 55px ;
    transition: height 1s;
    -webkit-transition: height 1s;


}

.flowingdown:hover {
    height:100px;
}
Solution

  • Assume you have the following markup:

    <div id="parent">
    Some content
    <div id="hover-content">
        Only show this when hovering parent
    </div>
</div>

    The CSS:

    #hover-content {
    display:none;
}
#parent:hover #hover-content {
    display:block;
}

    This should do the trick.

    Not sure how you'd do it with transitions, but you'd have to put the same selector at least.

    Example