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;
}
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
We can apply an adjacent sibling CSS selector property to the <a> tag that will display the hidden div element's content while hovering over it. The Adjacent sibling selector is a CSS Combinators, used to select the element that is adjacent or the element that is next to the specified selector tag.
We now have our link. to add mouseover text, just use the "title" attribute, like so: <a href=" " title="This is some text I want to display. ">This link has mouseover text. </a> (see the next line to check this out in action.) This link has mouseover text.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With