I'm trying to get it so when I hover over a DIV another DIV with be displayed within that DIV but over the current content. So if I have a 500px by 500px DIV with a book cover being displayed, when I hover over it, another DIV 90% by 90% of the parent DIV will appear in it displaying the book details, but over the book cover.

So far all I've managed to do is make divs appear on hover but they are added to within the parent stretching, making a scroll bar etc.

I've tried using display: none and display: block and visibility hidden, and searched loads, but none seems to allow the showing of a DIV over current content.

This fiddle is the nearest I can get, but it doesn't go over the content in the main DIV, and isn't confined to the main DIV either. /

    *{
    margin:0;
    padding:0;
}
#content{
    height:100%;
    width:100%;
    background-color: #CCCCCC;
    padding:0;
    margin:0;
    position:absolute;
}
#hoverbar{
    height:90%;
    width:90%;
    background-color: #666;
    position:absolute;
    visibility:hidden;
    margin-left: 5%;
    margin-top: 5%;
}
#content:hover > #hoverbar{
    visibility:visible;
}

<div id="content">
    image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>
    <div id="hoverbar">
        details
    </div>
</div>

Something along the lines of this site: /

I sadly haven't got any current code to show as I'm just trying small scale tests to find a solution. I've tried things such as answers from these SOF questions:

Using only CSS, show div on hover over <a>

CSS On hover show another element

But none provide a result I feel I can work with.

I feel I may need to use a modal box get element type deal, though I've never done one for on hover, only onclick.

Hope this question is valid, I'd love to get this working -Tom

I'm trying to get it so when I hover over a DIV another DIV with be displayed within that DIV but over the current content. So if I have a 500px by 500px DIV with a book cover being displayed, when I hover over it, another DIV 90% by 90% of the parent DIV will appear in it displaying the book details, but over the book cover.

So far all I've managed to do is make divs appear on hover but they are added to within the parent stretching, making a scroll bar etc.

I've tried using display: none and display: block and visibility hidden, and searched loads, but none seems to allow the showing of a DIV over current content.

This fiddle is the nearest I can get, but it doesn't go over the content in the main DIV, and isn't confined to the main DIV either. http://jsfiddle/vereonix/kPPFv/

    *{
    margin:0;
    padding:0;
}
#content{
    height:100%;
    width:100%;
    background-color: #CCCCCC;
    padding:0;
    margin:0;
    position:absolute;
}
#hoverbar{
    height:90%;
    width:90%;
    background-color: #666;
    position:absolute;
    visibility:hidden;
    margin-left: 5%;
    margin-top: 5%;
}
#content:hover > #hoverbar{
    visibility:visible;
}

<div id="content">
    image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>
    <div id="hoverbar">
        details
    </div>
</div>

Something along the lines of this site: http://studionudge./

I sadly haven't got any current code to show as I'm just trying small scale tests to find a solution. I've tried things such as answers from these SOF questions:

Using only CSS, show div on hover over <a>

CSS On hover show another element

But none provide a result I feel I can work with.

I feel I may need to use a modal box get element type deal, though I've never done one for on hover, only onclick.

Hope this question is valid, I'd love to get this working -Tom

• javascript
• css
• html

• See stackoverflow./questions/20465386/… – tewathia Commented Dec 10, 2013 at 15:27

3 Answers 3

You can use position property like this:

Html

<div class="book">
  <div class="info">More info here</div>
  <div class="image">
      Image here
  </div>
</div>

CSS

.book {
  position:relative;
}
.info {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  display:none;
}
.book:hover .info{
  display:block;
}

The demo http://jsfiddle/6ReTK/10/

To get some effect you can use Jquery Fading methods or use CSS transitions:

info {
  transition:opacity 1s;
  opacity:0;
}
.book:hover .info{
  opacity:1;
}

Another demo http://jsfiddle/6ReTK/12/

margin-top and margin-left move even absolutely-positioned elements only relative to their current position in the DOM. top, left, right, and bottom are the CSS rules for moving absolutely-positioned elements. If you add, for instance, top: 0; left 0; in your fiddle, you get what I believe is the behavior you describe.

you just need to add absolute positioning coordinates: top:0 and left:0. Fiddle here: http://jsfiddle/kPPFv/2/