Html 设置缩略图悬停范围放大图像位置

我正在尝试在此页面上实现照片库：

.gallerycontainer{
位置：相对位置；
/*添加高度属性并设置为最大图像高度以防止重叠*/
}
.缩略图像{
边框：1px纯白；
边距：0 5px 5px 0；
}
.缩略图：悬停{
背景色：透明；
}
.缩略图：悬停img{
边框：1px纯蓝色；
}
.thumbnail span{/*CSS用于放大图像*/
位置：绝对位置；
背景颜色：浅黄色；
填充物：5px；
左：-1000px；
边框：1px灰色虚线；
可见性：隐藏；
颜色：黑色；
文字装饰：无；
}
.放大图像的缩略图跨度img{/*CSS*/
边框宽度：0；
填充：2px；
}
.缩略图：悬停span{/*CSS用于放大图像*/
能见度：可见；
顶部：1000px；
左：300px；/*放大图像应水平偏移的位置*/
z指数：自动；
}

---

如果您想在不设置图像中心的特定顶部和左侧值的情况下实现这一点

您必须在父容器上添加一个

位置：相对
。
然后将
的
顶部
和
左侧
属性更改为
0
，并添加
右侧：0
。要居中放置的
absolute
div（放大图像），请添加
margin:0 auto
。最后，将该元素的宽度设置为
max content

CSS:

.gallerycontainer{
位置：相对位置；
}
.缩略图：悬停范围{
能见度：可见；
排名：0；
左：0；
右：0；
z指数：自动；
保证金：0自动；
宽度：最大含量；
}
谢谢你，我的朋友！！这是位置的增加：绝对；到最后成功的悬停跨度@别忘了投票和接受；）嗯。。。我是新来的，我该如何“投票”？@RedKelly只需单击检查和向上箭头