I currently have a flexbox set up with two adjacent divs labeled as DIV 1 and DIV 2.
By default, both DIV 1 and DIV 2 are visible.
DIV 2 has a fixed width, occupying around 40% of the container's width.
DIV 1 dynamically adjusts its width to accommodate the space not taken by DIV 2.
My goal is to create a sliding effect that allows DIV 2 to smoothly slide in from the right side using transition animations.
During this transition, DIV 1 should slide out of view towards the left until it becomes temporarily invisible while still existing in the DOM.
I've attempted various methods to increase the width of DIV 2 but haven't been successful in achieving a seamless transition. Does anyone have suggestions on how I can accomplish this?
Below is the HTML structure:
<div class="container">
<div id="left">Left side content</div>
<div id="right">Right side content </div>
</div>
CSS styles used:
.container {
display: flex;
flex-direction: row;
height: 200px;
width: 400px;
border: 2px solid;
gap: 10px;
overflow: hidden;
cursor: pointer;
}
#left {
flex: 1;
background-color: red;
transition: 0.5s;
}
#right {
width: 40%;
background-color: blue;
}
.container:hover > #left {
transform: translate(-100%);
}