Change div image with transition when hovering an other div (ONLY CSS) - html

Question

I have a little problem that i can't resolve, cause i want use solo CSS. I just want to do the opposite of what my code does, but i couldn't found the way to do it. That's my code:
HTML:
<div class="central1">
<div id="central_imgl">
<img class="bottom" src="images/kostnic_central1.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="images/kostnic.jpg" width="370px" height="400px"/>
</div>
<div id="central_imgr">
<img class="bottom" src="images/kostnic_central2.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="images/kdata2.jpg"/>
</div>
</div>
CSS:
div.central1{
background: black;
display: block;
position: absolute;
width: 740px;
height: 400px;
top:190px;
left:350px;
color: white;
}
#central_imgl {
position:relative;
float: left;
width: 50%;
height: 100%;
margin:0 auto;
}
#central_imgl img {
position:absolute;
left:0;
width: 368px;
height: 400px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#central_imgl img.top1:hover {
opacity:0;
}
(And the same for central_imgr with float:right)
Now I want to change the displayed img on 'central_imgr' when i hover central_imgl, keeping the frontal img of central_imgl, and vice versa.
Thanks all!

Answer 1

DEMO
css code:
*{
box-sizing:border-box;
}
div.central1{
background: black;
display: block;
position: absolute;
width: 740px;
height: 400px;
top:190px;
left:350px;
color: white;
border:4px solid black;
overflow:hidden;
}
[id^=central] {
position:relative;
float: left;
width: 50%;
height: 100%;
}
[id=hiddenDiv]{
position:absolute;
right: 0;
width: 50%;
height: 100%;
z-index:1;
}
img {
position:absolute;
left:0;
top:0;
width: 100%;
height: 400px;
transition: opacity 1s ease-in-out;
}
#central_imgl .top1:hover {
opacity:0;
}
#central_imgl:hover + [id=central_imgr] .hover{
opacity:0;
}
[id=hiddenDiv]:hover + #central_imgl .top1{
opacity:0;
}
html code:
<div class=central1>
<div id=hiddenDiv></div>
<div id="central_imgl">
<img class=bottom src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/1604926_659171170797962_1284145215_n.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10154320_659171017464644_1223781208_n.jpg" width="370px" height="400px"/>
</div>
<div id=central_imgr>
<img class=bottom src="https://scontent-b-fra.xx.fbcdn.net/hphotos-prn2/t1.0-9/1234076_659170960797983_1698005470_n.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1.0-9/10156133_658968587484887_710971290_n.jpg"/>
</div>
</div>