css - 纯 CSS3 图片缩略图查看器？

Question

纯 CSS3/HTML 缩略图缩放器有什么解决方案吗？

2 解决方案就可以了:弹出窗口，或站点中剩余的另一个 Div + 显示缩略图的当前悬停区域。

但是对于eBay来说必须没有js。

非常感谢。

Answer 1

你可以这样做

#yourDiv:hover {
    transform: scale(5);
}

图像可能有点模糊。但请尝试一下，看看它是如何工作的。

或者另一种选择是创建另一个 div，然后添加以下 css

#anotherDiv {
     width: 800px;   /* use whatever width you want, can be px or % */
     height: 500px;  /* use whatever height that works */
     display: none;  /* this will hide it from appearing until the user hovers over the thumbnail #yourDiv */
}

#yourDiv:hover #anotherDiv {
     display: block;  /* this will show it when they hover over thumbnail #yourDiv */
}