Javascript css 9图像，并将一个图像扩展到4大小，而无需离开屏幕

嗨，我一直在发疯，试图找到一种方法来完成以下任务。我有9张图片，每行3张，总共3行。 我需要在不超出总宽度的情况下，将悬停时的每个图像扩展到与四个图像相同的大小

与此JSFIDLE几乎相同（区别如下）：

1.
2.
3.
4.
5.
6.
7.
8.
9

不同之处在于，在本例中，图像位于容器外部

预期功能：

悬停在图像3上=图像悬停在div2、3、5、6上

悬停在图像9上=图像悬停在div 5、6、8、9上

图5在我的案例中不需要悬停效果

我需要在不使用jquery或其他库的情况下使用javascript实现这一点

编辑：添加了新的示例，我正在基于Joshunt反馈进行工作：

---

6号怎么样？如果是这样的话，你能检测到每三个元素并做一些不同的事情吗？您可能需要放置

位置：relative

转到

.image

，然后在设置高度/宽度动画的同时将其向左移动33%。感谢您这么快的评论。如果将鼠标悬停在image 6上=将鼠标悬停在div 5、6、8、9上。其余的注释有意义吗？你能试着用纯javascript建立一个例子吗？事实上，你甚至可以用纯css来做，我不明白你想说什么，关于动画，我怎么能用javascript来做呢。我需要用javascript来完成它（我将尝试在jsfiddle上用纯javascript做一个例子。joshhunt我用新的jsfiddle编辑了我的问题，谢谢你提供反馈。你可以看到这些图片把其他图片推到了周围。。。

<div id="imageContainer">
    <div class='image red'>1</div>
    <div class='image blue'>2</div>
    <div class='image green'>3</div>
    <div class='image orange'>4</div>
    <div class='image silver'>5</div>
    <div class='image yellow'>6</div>
    <div class='image black'>7</div>
    <div class='image gold'>8</div>
    <div class='image brown'>9</div>
</div>