CSS影响代码中其他位置的元素

Question

广泛搜索后，我没有找到答案。我发现的一切都与孩子或兄弟姐妹有关。我发现使用'+'，'〜'，''，'>'对孩子或兄弟姐妹没有其他影响。

使用Codepen（及以下）中的代码，当侧边菜单中的“信息”悬停在上方时，我试图将第二张图像移到右侧。如何才能做到这一点？

基本上，我想要的是让侧面菜单项影响html中的其他元素。这些其他元素不是菜单项的同级或子级。

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;
}