Within my design, I have three main boxes identified as #box1, #box2, and #box3. The goal is to reveal the hidden information text, labeled .info1, .info2, and .info3 respectively, when hovering over each box. Simultaneously, the opacity of the other boxes should reduce to 0.2 and the ".headline" should be hidden.
I'm exploring ways to achieve this effect without the use of Javascript, relying solely on CSS.
After researching various resources, I'm struggling to understand why the following approach is not producing the desired outcome: http://jsfiddle.net/q6jpjz65/1/
.headline {
display: block;
}
.info1 {
display: none;
}
.info2 {
display: none;
}
.info3 {
display: none;
}
#box1, #box2, #box3 {
background-color: rgba(0,0,0,1.0);
width: 1.92708%;
height: 3.7871%;
position: absolute;
border: 1px solid white;
outline: 1px solid black;
opacity: 1;
}
#box1:hover #box2 #box3 {
opacity: 0.2;
}
#box1:hover + .info1 {
display: block;
opacity: 1;
}
#box1:hover + .headline {
display: none;
opacity: 1;
}
#box2:hover #box1 #box3 {
opacity: 0.2;
}
#box2:hover + .info2 {
display: block;
opacity: 1;
}
#box2:hover + .headline {
display: none;
opacity: 1;
}
#box3:hover #box1 #box2 {
opacity: 0.2;
}
#box3:hover + .info3 {
display: block;
opacity: 1;
}
#box3:hover + .headline {
display: none;
opacity: 1;
}
<div class="headline">
This text is always displayed when nothing is hovered.
</div>
<div id="box1" style="top: 10%">
<div class="info1">
Information for box1.
</div>
</div>
<div id="box2" style="top: 30%">
<div class="info2">
Information for box2.
</div>
</div>
<div id="box3" style="top: 50%">
<div class="info3">
Information for box3.
</div>
</div>