display image in left div on hovering right div - html

Question

I have two div's float left and right. In the left div there is an image, and in the right div there are paragraphs. The image in the left div is hidden, when I hover the right div the image should be displayed but I can't do this, there is a problem when I attempt to do this.
.lower-container {
padding: 10px;
width: 100%;
text-align: center;
margin-bottom: -70px;
}
.left-logo-container {
width: 40%;
float: left;
padding: 10px;
padding-top: 0 !important;
}
.left-logo-container img {
width: 250px;
padding-bottom: 50px;
}
.right-para-container {
width: 60%;
float: right;
padding: 10px;
margin-top: -200px;
}
.right-para-container p {
color: white;
text-align: left;
padding-left: 0;
padding-right: 120px;
font-family: oh-whale;
}
.clear:after {
clear: both;
content: "";
display: table;
}
/* Display element on hovering */
.hide {
display: none;
}
.myDIV:hover+.hide {
display: block;
}
<section id="welcome_cryptonic_06">
<div class="container">
<div class="vision-container">
<div class="title-container">
</div>
<div class="lower-container">
<div class="left-logo-container myDIV">
<img src="about_image.png">
</div>
<div class="right-para-container hide">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores provident ipsum veritatis quod eveniet aperiam ipsa voluptatibus mollitia deserunt eos itaque assumenda omnis nam animi consequuntur voluptate, placeat velit repudiandae. Lorem, ipsum dolor
sit amet consectetur adipisicing elit. Fugiat, veritatis? Iure dolor consequatur possimus ipsum tenetur quos tempora animi numquam inventore. Pariatur doloremque ut deleniti fugiat enim, laudantium culpa sit.
</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</section>
<!-- End welcome_cryptonic -->

Answer 1

Here is the solution !
Run the code in a full screen.
.lower-container {
display: flex;
flex-wrap:wrap;
padding:5rem;
height:20%;
}
.left-logo-container {
order:1;
height:20rem !important;
padding:2rem;
}
.left-logo-container img{
height:20rem;
width:auto;
}
.right-para-container {
order:2;
height:25%
color: black;
width:50%;
text-align: left;
font-family: oh-whale;
padding:5rem;
}
.right-para-container p{
border:2px solid grey;
border-radius:2rem;
padding:2rem;
}
#show {
display: none
}
#main:hover + #show {
display: block
}
<section id="welcome_cryptonic_06">
<div class="container">
<div class="vision-container">
<div class="title-container">
</div>
<div class="lower-container">
<div class="right-para-container " id='main'>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores provident ipsum veritatis quod eveniet aperiam ipsa voluptatibus mollitia deserunt eos itaque assumenda omnis nam animi consequuntur voluptate, placeat velit repudiandae. Lorem, ipsum dolor
sit amet consectetur adipisicing elit. Fugiat, veritatis? Iure dolor consequatur possimus ipsum tenetur quos tempora animi numquam inventore. Pariatur doloremque ut deleniti fugiat enim, laudantium culpa sit.
</p>
</div>
<div class="left-logo-container " id='show'>
<img src="https://images.unsplash.com/photo-1655833266283-af4002bf9ebb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
</div>
</div>
</div>
</div>
</section>