CSS Effecting a element else where in the code

Question

After extensive searching I have not found a answer. Everything I find has to do with child or siblings. I found using '+', '~', ' ', '>' have no effect other then on children or siblings.

Using the code in my Codepen(and below), I am trying to get the second image that is behind the first to move to the right when 'info' in the side menu is hovered over. How can this be done?

Basically, What I want is to have the side menu items effecting other elements in the html. These other elements are not siblings or children to the menu items.

html

<div class="container">
  <div class="side_nav">
    <ul>
      <li class="info">Info</li>
      <li class="stuff">Stuff</li>
      <li class="other">Other</li>
    </ul>
  </div>
  <div class="main_content">
    <img class="img1" src="https://images.freeimages.com/images/large-previews/389/mitze-1380778.jpg">
    <img class="img2" src="https://images.freeimages.com/images/large-previews/45f/garter-snake-1401165.jpg">
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 100px auto;
}

.side_nav{
  grid-column: 1;
  background-color: #aaa;
}

.main_content {
  grid-column: 2;
  background-color: #eee;
}
.img1 {
  position: relative;
  z-index: 5;
  width: 200px;
}
.img2 {
  position: absolute; 
  z-index: 3;
  width: 200px;
  left: 109px;
}

.info:hover ~ .img2 {
  left: 300px;
}