Html 图像消失在div下

我正在尝试建立一个网站。这是图库，当你把鼠标放在图像上时，图像应该移到中间，但是id不起作用，因为图像神奇地消失了

main{
宽度：942px；
}
div{
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Supermillion_Visuals_-_Aston_Fresh_Park_1-02601.jpg/1200px-Supermillion_Visuals_-_Aston_Fresh_Park_1-02601.jpg");
背景尺寸：217px 111px；
宽度：217px；
高度：111px；
z指数：1；
背景重复：无重复；
位置：绝对位置；
}
div:悬停{
宽度：100%；
高度：1000px；
过渡：缓进缓出1s；
z指数：5；
}
.a{
顶部：205px；
}
a:悬停{
背景位置：400px 170px；
背景尺寸：615px 333px；
}
.b{
顶部：390px；
}
b:悬停{
背景位置：400px 0px；
背景尺寸：615px 333px；
}
c{
顶部：575px；
}
c:悬停{
背景位置：400px-170px；
背景尺寸：615px 333px；
}
博士{
顶部：760px；
}
d:悬停{
背景位置：400px-340px；
背景尺寸：615px 333px；
z指数：6；
}

---

这是因为您更改了

backhground位置

使图像超出了div的边界

使用“缩放”和“调整变换原点”执行不同操作：

div{
宽度：217px；
位置：相对位置；
保证金：5px；
背景大小：0；
}
/*保持图像的比例*/
部门：以前{
内容：“；
显示：块；
填充顶部：50%；/*1/2*/
}
/**/
/*形象*/
部门：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
过渡：缓进缓出0.3s；
背景图像：继承；
背景大小：100%100%；
}
/**/
div:hover:：after{
变换：缩放（2）；/*使图像变大*/
z指数：9；
过渡：缓进缓出1s；
}
/*相同的X不同的Y*/
.a：：在{转换原点：-120%-100%；}之后
.b:：在{转换原点：-120%-40%；}之后
.c:：在{转换原点：-120%140%；}之后
.d:：在{转换原点：-120%200%；}之后

---

尝试增加z索引