Css 重叠照片

当你将鼠标悬停在照片上方时，我试图设置一种查看照片的方式，但我在浮动和定位方面遇到了一些问题。我要让它像这样工作

**HTML**

<div id="container-collection">

  <div id="clothes1"><img src="Images/smallest/JPEG/IMG_3148.jpg" alt="1" width="211" height="316" onMouseOver="MM_showHideLayers('closeup1','','show')" onMouseOut="MM_showHideLayers('closeup1','','hide')"></div><div id="clothes2"><img src="Images/smallest/JPEG/IMG_3124.jpg" alt="2" width="211" height="316" onMouseOver="MM_showHideLayers('closeup2','','show')" onMouseOut="MM_showHideLayers('closeup2','','hide')"></div>
  <div id="closeup1"><img src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg" width="432" height="648" alt="11"></div>  <div id="closeup2"><img src="Images/Smaller/bigger ones/JPEG/IMG_3124_1.jpg" width="432" height="648" alt="11"></div>

</div>


**CSS**

#container-collection { width: 900px; margin:0 auto; padding-top: 90px; }

#clothes1 { float:left; left:0px; top:5px; width:209px; height:316px; z-index:1; }

#clothes2 { float:left; left:5px;   top:5px; width:209px;   height:316px;   z-index:1; }

#closeup1 { float:left; left:400px; top:-316px; width:427px;    height:648px;   z-index:2;  visibility: hidden; }

#closeup2 { position:relative;  left:423px; top:-648px; width:427px;    height:648px;   z-index:3;  visibility: hidden; }

**HTML**
**CSS**
#容器集合{宽度：900px；边距：0自动；填充顶部：90px；}
#衣物1{浮动：左；左：0px；顶部：5px；宽度：209px；高度：316px；z指数：1；}
#衣物2{浮动：左；左：5px；顶部：5px；宽度：209px；高度：316px；z指数：1；}
#特写1{浮动：左；左：400px；顶部：-316px；宽度：427px；高度：648px；z索引：2；可见性：隐藏；}
#特写2{位置：相对；左侧：423px；顶部：-648px；宽度：427px；高度：648px；z索引：3；可见性：隐藏；}

但一定有更好的办法。

---

干杯。

有许多JavaScript插件可用于快速实现这一点

例如，尝试引导插件：

注意：

可选，一个更简单的显示预览的版本可以仅使用CSS，使用悬停

<style>
    a.info
    {
        position: relative; /*this is the key*/
        z-index: 204;
        color: #000;
        text-decoration: none;
    }

    a.info:hover
    {
        z-index: 205;
        background-color: gainsboro;
    }

    a.info span{display: none}

    a.info:hover span
    {
        /*the span will display just on :hover state*/
        display: block;
        position: absolute;
        top: 3em;
        left: 1em;
    }
</style>

<a class="info" href="javascript:focus();">
<img src="image1.jpg" /><span><img src="image2.jpg" /></span>
</a>

a、 信息
{
位置：相对；/*这是关键*/
z指数：204；
颜色：#000；
文字装饰：无；
}
a、 信息：悬停
{
z指数：205；
背景色：gainsboro；
}
a、 信息span{显示：无}
a、 信息：悬停跨度
{
/*跨度将显示为刚好打开：悬停状态*/
显示：块；
位置：绝对位置；
顶部：3em；
左：1米；
}

您能解释一下您的目标是什么吗？另外，在图像标签上使用嵌入式JavaScript通常是不鼓励的做法。

<style>
    a.info
    {
        position: relative; /*this is the key*/
        z-index: 204;
        color: #000;
        text-decoration: none;
    }

    a.info:hover
    {
        z-index: 205;
        background-color: gainsboro;
    }

    a.info span{display: none}

    a.info:hover span
    {
        /*the span will display just on :hover state*/
        display: block;
        position: absolute;
        top: 3em;
        left: 1em;
    }
</style>

<a class="info" href="javascript:focus();">
<img src="image1.jpg" /><span><img src="image2.jpg" /></span>
</a>