Display div on hover and make it scrollable - html

Question

When hovering a div, I want to display a full-page div with a background image and text on top. The hovered div should then stay on top of everything. This works so far, with the only exception that I can’t figure out how to make the overflow text scrollable.
Any ideas how to make this work?
JSFiddle
html:
<div class="container">
<div class="title">Show content</div>
<div class="content">
<div class="background"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/800px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg"></div>
<div class="infocontainer">
<div class="info">
Lorem Ipsum...
</div>
</div>
</div>
</div>
css:
.container {
position: fixed;
left: 50%;
top: 10%;
}
.content {
display: none;
}
.title:hover + .content {
display: block;
width: 100%;
height: 100%;
}
.title:hover {
position: relative;
z-index: 3;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.infocontainer {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2;
overflow: scroll;
}
.info {
height: 100%;
padding-right: 70%;
}
UPDATE: When I put .info on top with z-index, it becomes scrollable but I get a flickering effect because .title:hover gets over overridden. See: jsfiddle.net/dm41eo5z

Answer 1

You can't hover to make something appear over the whole page, because as soon as it is over the whole page you are no longer hovering the original thing (that's why your example above flickers) and it will disappear. If you use a JavaScript Event listener (such as onMouseOver) you could make it appear by adding a class with a "display: absolute" or "block" or whatever you want it to do. Then it would stay open until you use some other event listener (such as "Click" on an X) to close the element.

Answer 2

The .content div disappears as soon as you stop hovering the .title. To prevent that, continue showing .content while you hover it:
.title:hover + .content, .content:hover {
display: block;
width: 100%;
height: 100%;
}
Note: to hide .content, the user will have to move the cursor out of the screen.
Demo:
.container {
position: fixed;
left: 50%;
top: 10%;
}
.content {
display: none;
}
.title:hover + .content, .content:hover {
display: block;
width: 100%;
height: 100%;
}
.title:hover {
position: relative;
z-index: 3;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.infocontainer {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2;
overflow: scroll;
}
.info {
height: 100%;
padding-right: 70%;
}
<div class="container">
<div class="title">Show content</div>
<div class="content">
<div class="background"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/800px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg"></div>
<div class="infocontainer">
<div class="info">
Pellentesque venenatis tempor ultrices. Nunc maximus erat vel tellus vestibulum, id auctor justo tristique. Ut volutpat eu tellus ut vulputate. Cras id finibus massa. Quisque neque lacus, pretium sed luctus in, semper ut quam. Donec elementum volutpat elementum. Morbi nibh nunc, scelerisque congue turpis nec, lacinia venenatis tortor.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi quis magna urna. Etiam tincidunt velit lacus, ac blandit ex pretium nec. Nulla semper erat ut tortor luctus, sit amet suscipit felis ullamcorper. Etiam laoreet, mauris ut volutpat pellentesque, velit neque euismod sem, in condimentum mauris orci nec nibh. Vivamus ac sem et turpis pellentesque volutpat ac ac ligula. Phasellus feugiat dapibus maximus. Donec eros felis, suscipit eu neque quis, sagittis faucibus ipsum. Nam auctor molestie quam nec tristique. Aliquam dolor velit, condimentum in vehicula ut, pretium sed leo. Proin sit amet quam nunc.
Integer eu orci quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed felis vitae justo faucibus blandit at a dolor. Curabitur id nisi nec elit aliquam convallis nec eu est. Aenean viverra id diam ac accumsan. Praesent tempor, magna eget molestie sodales, neque libero pretium magna, id euismod justo erat at est. Phasellus ultrices metus et massa varius, at rutrum augue pretium. Mauris ultrices felis et magna luctus sodales. Curabitur sodales pellentesque ante auctor molestie. Donec sed massa scelerisque elit auctor lacinia ac vel risus. In eleifend vulputate sapien a tristique. Nam eleifend rutrum metus.
</div>
</div>
</div>
</div>

Answer 3

Thank you for your replies so far but they don't exactly achieve what I'm looking for. Is there maybe a way to keep .title on top but specifically target .info for scrolling?