CSS只有缩略图滑块

Question

我正在尝试制作一个缩略图，在悬停时将仅使用CSS并使用img元素并使用{background-image元素移动它的图像（比包装器更长）一直向左移动1}}。

我遇到的问题是，我不知道如果图像的宽度不同，我怎么能找到移动它的数量。

我做了a demo左图像正确移动的位置，因为我计算了需要移动多少以及相同CSS移动不正确的右图像。

Answer 1

目前尚不清楚为什么要限制自己单独操纵img元素而不是探索更常见的背景图像精灵般的悬停事件操作。

看看这个Codrops article及其demo's here（请注意菜单中有5个演示版）。

所提供的技术不会产生您所追求的确切最终结果，但它们确实包含了您需要使用的事件类型和操作的结构。