css - Overlap element on hover -
I want a bootstrap panel header to expand on the hover, but not below the next panel as shown in this bedle Shake should:
What do I need to do when you hover over the top of the panel, instead of pushing it forward will overlap the panel body.
My HTML is just Twitter Bootstrap stuff and looks like this:
& lt; Div class = "panel-panel-default" & gt; & Lt; Div class = "panel-title" & gt; & Lt; Img src = "profile-pic.jpg" alt = "profile picture" /> & Lt; / Div & gt; & Lt; Div class = "panel-body" & gt; & Lt; B & gt; John Doe & lt; / B & gt; & Lt; Br / & gt; J.do@example.com & lt; Br / & gt; Sumnstreet & lt; Br / & gt; & Lt; P & gt; City & lt; / P & gt; & Lt; Br / & gt; & Lt; / Div & gt; & Lt; / Div & gt;
And looks like my CSS:
. Panel-Title {Height: 100px; }. Panel-Title: Hover {Height: 150px; / * This should really be 100% because it will contain an image. * / Status: Relative; The text "itemprop =" text ">
is that what Are you looking for?
Your panel is titled complete
, from your panel-default
to relative < / Code> and your panel-body
in the padding-top
add padding-top
panel-title height
The height should be.
. Panel-Title {Altitude: 100px; Width: 100%; Condition: Full;} Panel-Title: Hover {Height: 150px;} .panel- default { Status: Relative; / * Is the full title * * .panel-body {should be padding-top: 100px; / * === panel-top height * /}
Comments
Post a Comment