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.
Example
If, per say, you have this context :
<div class="flowingdown">
<div class="something-inside">
something-inside
</div>
<div class="something-inside-but-hidden">
something-inside-but-hidden
</div>
</div>
CSS
.something-inside-but-hidden {display:none}
.flowingdown:hover .something-inside-but-hidden {display:block}
Working example jsFiddled here
Yes, it is possible.
But wrap your .flowingdown within a div. Inorder to show the entire content,
<div style="width: 200px; height:300px;">
<div class="flowingdown"></div>
</div>
CSS:
.flowingdown {
width:1045px;
background-image:url(http://i.imgur.com/hHUa9Ty.jpg);
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:100%; //Inorder to show the entire content within the parent.
}
Check this JSFiddle
I assume you are trying to hide the bottom half of the background-image, but I just tested this exact code and it worked fine:
<html>
<head>
<style>
.flowingdown {
width:1045px;
background-image:url(../Pictures/C_2560x1400.jpg);
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;
}
</style>
</head>
<body>
<div class="flowingdown">
</div>
</body>
That's the same exact code you used, except I used an image of my own.
If what you want is to change the background image on hover, your CSS should be:
.flowingdown:hover {
height:100px;
background-image:url(path.jpg);
}
Let me know if I misunderstood your question.
![Prime Path[POJ3126] [SPFA/BFS]](https://oscimg.oschina.net/oscnet/e1200f32e838bf1d387d671dc8e6894c37d.jpg "Prime Path[POJ3126] [SPFA/BFS]")
