CSS翻转：多个拇指控制中央窗格中的大图像点击或悬停

Question

我想实现在许多商业网站和Craigslist上看到的效果，在那里你有一个大的产品图像，下面或旁边有一组拇指，比如四个。当您悬停或单击其中一个拇指时，主图像会发生变化。换句话说，有一个显示窗格和四个拇指可以控制当您单击或悬停在显示窗格中时显示的内容。

我有一个纯粹的css解决方案，可以在悬停时将一个大图像交换为一个小图像，但我无法将其调整为四个可能的拇指。我正在尝试使用css代替JS，因为这似乎是现在推荐的翻转解决方案。

以下是我的意思。非常感谢有关如何从这里做的任何建议。

HTML

<span id="viewingpane"><img src="bigimage.jpg" width=420></span><br>
<a class="rollover" href=""><img src="thumb1.jpg" width=100></a> <a class="rollover" href=""><img src="thumb2.jpg" width=100></a> <a class="rollover" href=""><img src="thumb3.jpg"></a> <a class="rollover" href=""><img src="thumb3.jpg" width=100></a> <a class="rollover" href=""><img src="thumb4.jpg" width=100></a>

CSS

a.rollover {
    display: block;
    position: relative;
}
a.rollover span {
    position: absolute;
    left: -1000px;
}
a.rollover:hover span {
    position: absolute;
    top: -48px;
    left: -12px;
}