CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
BrTkCa
BrTkCa

Reputation: 4783

Overlay Panel when image mouse hover

I'm using Twitter Bootstrap and I want to implement a overlay panel when mouse hover the img tag, like in Stackoverflow when details is showed when the focus is in the image of the user.

This image illustrate:

enter image description here

Someone how I do this? Thanks.

Upvotes: 1

Views: 2351

Answers (1)

Ava
Ava

Reputation: 2429

Whatever you want as the "hovering" object, just give position: absolute, then have a :hover selector, for example:

HTML

<div>
   <div class="Profile">
       Basic Profile
       <div class="Overlay">
           Put overlay stuff here.
       </div>
   </div>
</div>

CSS

.Profile{
    position: relative;
}
.Overlay{
    position: absolute;
    top: 100%;
    left: 0px;
    opacity: 0;
    height: 0;
}

.Profile:hover .Overlay{
    height: auto;
    opacity: 1;
}

So now, when a user hovers over the .Profile div, the .Overlay contained within it will appear, then add any additional styling for transitions and making it pretty.

Example JSFiddle

Upvotes: 2

Related Questions