Display DIV on hover over another DIV - css

Question

I've found the solution I am looking for on SoF but the issue persists. I'm obviously not doing something correctly. Perhaps another pair of eyes would be helpful.
Basically, I want to show a hidden div while I hover over a separate div. While on hover over the separate div, it will change bg color.
Thanks for the help.
Here is a CodePen of what I have so far.
HTML
<div class="container-fluid">
<div class="image">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<div class="one-text">
<p>Here is some text</p>
</div>
<div class="two-text">
<p>Here is some text</p>
</div>
<div class="three-text">
<p>Here is some text</p>
</div>
<div class="four-text">
<p>Here is some text</p>
</div>
<div class="five-text">
<p>Here is some text</p>
</div>
</div>
CSS
body {
background-color: #c5d5cb;
color: #fff;
font-family: Open Sans;
font-weight: 300;
margin: 0 auto;
}
.container-fluid {
background-color: #9fa8a3;
height: 600px;
padding: 30px;
}
.container-fluid .image {
background-color: #e3e0cf;
height: 100%;
width: 50%;
float: right;
padding: 30px;
display: flex;
justify-content: space-between;
}
.container-fluid .image .one {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .one:hover {
background-color: #3b3a36;
}
.container-fluid .image .two {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .two:hover {
background-color: #3b3a36;
}
.container-fluid .image .three {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .three:hover {
background-color: #3b3a36;
}
.container-fluid .image .four {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .four:hover {
background-color: #3b3a36;
}
.container-fluid .image .five {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .five:hover {
background-color: #3b3a36;
}
.container-fluid .one-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .two-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .three-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .four-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .five-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .one:hover + .one-text {
display: block;
}
.container-fluid .two:hover + .two-text {
display: block;
}
.container-fluid .three:hover + .three-text {
display: block;
}
.container-fluid .four:hover + .four-text {
display: block;
}
.container-fluid .five:hover + .five-text {
display: block;
}

Answer 1

Ok I have done this with JS, simply because it would have been too much a hassle with CSS, also, I doubt it's possible in CSS. I will post the CSS rules later on.
I have done it in plain vanilla JS, it will work in all modern browsers.
First I have added a slight transition to everything, instead of display none on the paragraphs i have done:
webkit-transition:.4s;
transition:.4s;
opacity:0;
Then I have created a mouseIn and mouse Out function, with 3 parameters.
function onEntry(whichDiv,whichText, color) {
whichDiv.style.background = color;
whichText.style.opacity = '1';
}
Then, I had to add an EventListener to all divs:
one.addEventListener('mouseover', function(){
onEntry(one, txtOne, "#3b3a36");
}
See, that 3rd parameter, you can change to your desired colors.
Here is the link to the pen:
http://codepen.io/damianocel/pen/vXQqJE
And on the CSS rules to affect other elements on hover, it goes like:
directly inside the container:
container:hover > #element
If cube is next to (after containers closing tag) the container:
container:hover + #element
If the cube is somewhere inside the container:
container:hover #cube
Cheers

Answer 2

Try it
#content:hover #hoverbar{
visibility:visible;
}