As a beginner in the world of coding, I am eager to tackle something simple in CSS. My current project involves a landing page that is divided into two sections down the middle. The left side features a yellow div, while the right side showcases a grey div. My goal is to create an interactive effect where hovering over one div increases its width (from left to right for the left div and vice versa) while simultaneously decreasing the width of the other div to prevent any overlap.
The code I have implemented successfully achieves this effect for the left side div. However, when I hover over the right side, the intended reduction in width for the left side does not occur, resulting in an overlap between the two.
I have tried adjusting the parent/child relationships as suggested by some resources but have yet to find a solution. Any guidance or advice on improving my code would be greatly appreciated.
#leftside {
/*this is the orange half*/
height: 100%;
width: 50%;
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
background-image: linear-gradient(rgba(255, 255, 0, 1), rgba(255, 165, 0, 1));
transition: all 1s;
}
#leftside:hover {
opacity: 1.0;
width: 51%;
}
#leftside:hover+#rightside {
width: 49%
}
#rightside {
/*this is the grey half*/
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
opacity: 0.5;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(160, 160, 160, 1));
transition: all 1s;
}
#rightside:hover {
opacity: 1.0;
width: 51%;
}
#rightside:hover+#leftside {
width: 49%
}<div id="leftside">
<a class="leftsidehome" href="page1.html"></a>
</div>
<div id="rightside">
<a class="rightsidehome" href="page2.html"></a>
</div>