Hide a div when hovering over another div - css

Question

I've written CSS that should hide the container div in the middle of the page, when the list div on the left is hovered over.
I've got a feeling that giving the container div a fixed position is causing this, but I'm not quite sure. The code seems correct.
Html
<section class="container">
<div class="description">
<h2>Writer</h2>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue rhoncus dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum</p>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis.</p>
</div>
</section>
<div class="list">
<ul class="projectList">
<li class="projectImage">Philomena Kwao<span><img src="helene images/philomena.jpg" alt="" height="" width="" /></span></li>
</ul>
</div>
<div>
css
.container {
position:absolute;
justify-content:center;
align-items:center;
box-sizing:border-box;
display:flex;
width:500px;
left:325px;
align-content:space-around;
}
.list {
width:325px;
margin: 20px 30px 20px 0;
box-sizing:bordr-box;
overflow-x:hidden;
}
ul {
list-style-type:none;
margin:0;
padding:0
}
.projectImage img {
display:none;
}
.list .projectImage:hover img {
display: block;
margin: 0;
top: 20%;
left: 50%;
transform: translate(-50%);
position: absolute;
display: block;
/* width: 100%;
height: 100%; */
}
.list:hover + section.container {
display: none;
}

Answer 1

.list:hover + section.container would only work if .list would be the preceding sibling of section.container. But your section.container is placed before .list.
The only way to make it work is to place .list before section.container. To display section besides .list, I used float: left; on .list.
Working example: https://codepen.io/anon/pen/PmJZgm?editors=1100
Note 1: you might have to tweak the margins/paddings a bit.
Note 2: If you place any content after section, when hiding it the rest of the content will jump up. If you don't want this, you probably want to try
.list:hover + section.container {
opacity: 0;
}

Answer 2

If you move .list before .container, your selector will work. I added a parent element (main) to .list and .container and used flex on the parent instead of using position: absolute on .container to get it beside .list.
#helene, body, html {
width:100%
}
body {
background-color:#FFFAF1;
}
#site {
height:100%;
width:100%;
box-sizing:border-box;
vertical-align:middle;
overflow:hidden;
display:block;
}
.title {
position:fixed:
z-index:10;
text-align:center;
}
.container {
justify-content:center;
align-items:center;
box-sizing:border-box;
display:flex;
flex: 0 0 500px;
align-content:space-around;
}
.list {
flex: 0 0 325px;
margin: 20px 30px 20px 0;
box-sizing:bordr-box;
overflow-x:hidden;
}
ul {
list-style-type:none;
margin:0;
padding:0
}
.projectImage img {
display:none;
}
.list .projectImage:hover img {
display: block;
margin: 0;
top: 20%;
left: 50%;
transform: translate(-50%);
position: absolute;
display: block;
/* width: 100%;
height: 100%; */
}
.list:hover + section.container {
display: none;
}
main {
display: flex;
}
<div id="helene">
<div id="site">
<header class="title">
<h1> Helene Selam Kleih</h1>
</header>
<main>
<div class="list">
<h2>In Conversation With-</h2>
<ul class="projectList">
<li class="projectImage">Philomena Kwao<span><img src="helene images/philomena.jpg" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
</ul>
<h2>Articles - </h2>
<ul class="projectList">
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
</ul>
</div>
<section class="container">
<div class="description">
<h2>Writer</h2>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue
rhoncus dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum</p>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis.</p>
</div>
</section>
</main>
</div>
</div>