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

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

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

但是它必须没有eBay的js。

非常感谢。

最佳答案

你可以这样做

#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 */
}

关于css - 纯CSS3图片缩略图查看器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21087461/