如何使用悬停效果使多个鼠标悬停图像显示在同一位置的多个图像

Question

这里我有一个相当简单的悬停效果，一旦我将鼠标悬停在imageOne上，ImageTwo就会显示在下方。我的目标是将imageThree放在imageOne旁边，让imageFour出现在与imageTwo相同的位置。我使用this来找到解决方案，但我的定位有所不同。

标记：

<ul>
<li>
   <img id="img1" src="imageone.png">
   <img id="img2" src="imagetwo.png">
</li>
<li>
   <img id="img3" src="imagethree.png">
   <img id="img4" src="imagefour.png">
</li>
</ul>

CSS：

#img2 {
display: none;
position: absolute;
}
#img1:hover + #img2,
#img2:hover {

display:block;
}