Display a DIV on hover, over but within another DIV which is hovered over. With CSS

css, html, javascript

Solution

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.net/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.net/6ReTK/12/

Problem

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.net/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.com/ 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

Original source

Related problems