3

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

Community
  • 1
  • 1
Vereonix
  • 1,341
  • 5
  • 27
  • 54

3 Answers3

5

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/

DaniP
  • 37,813
  • 8
  • 65
  • 74
  • Wonderful thank you so much, glad to know I wasn't far off, also massive thanks for the lil' fade in n' out. – Vereonix Dec 10 '13 at 15:44
  • Sorry for such a simply question now, but I can't figure out what controls exactly how faded the info DIV is when it has fully appeared. I hanged the rbg to white and it goes solid, is there a way to keep it slightly faded but not to black? – Vereonix Dec 10 '13 at 16:17
  • 1
    yep using rgba() you set rgb + alpha then for white is like rgba(255,255,255,0.5) where 0.5 is the value for alpha – DaniP Dec 10 '13 at 16:22
  • Ah lovely, my sites not look so 1999 now, thankyou for all the help. – Vereonix Dec 10 '13 at 16:34
0

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.

C. Warren Dale
  • 184
  • 2
  • 11
0

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

n1kkou
  • 3,096
  • 2
  • 21
  • 32