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