纯CSS3图片缩略图查看器？

Question

是纯CSS3 / HTML Thumbnail Zoomer的任何解决方案吗？

2解决方案没问题：弹出窗口，或网站中剩余的另一个Div +显示缩略图的当前悬停区域。

但它必须没有es的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 */
}