设置缩略图悬停跨度放大图像位置

Question

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

.gallerycontainer{
  position: relative;
  /*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
  border: 1px solid white;
  margin: 0 5px 5px 0;
}

.thumbnail:hover{
  background-color: transparent;
}

.thumbnail:hover img{
  border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
  visibility: visible;
  top: 1000px;
  left: 300px; /*position where enlarged image should offset horizontally */
  z-index: auto;
}

<div align="center">
  <div class="gallerycontainer">
    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb01a.jpg" title="Huey 'Piano' Smith" width="100px" border="0" />
      <span><img src="/images/jjb01a.jpg" /></span>
    </a>

    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb02.jpg" title="Archibald" width="100px" border="0" />
      <span><img src="/images/jjb02.jpg" /></span>
    </a>

    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb03.jpg" title="James LaRocca & John Broven" width="100px" border="0" />
      <span><img src="/images/jjb03.jpg" /></span>
    </a>

    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb04.jpg" title="Cosimo Recording" width="100px" border="0" />
      <span><img src="/images/jjb04.jpg" /></span>
    </a>

    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb05.jpg" title="Cosimo Matassa" width="100px" border="0" />
      <span><img src="/images/jjb05.jpg" /></span>
    </a>
  </div>
</div>

等...

我想将通过缩略图悬停放大的图像在页面的 660px 父容器中居中，而不是给它一个绝对的 top: 和 left: px 位置，这似乎以某种方式覆盖了 set 容器宽度...这有意义吗？我错过了一些非常明显的东西吗？我试过更改 z-index 等，但无济于事。

有什么想法吗？？非常感谢！！

Answer 1

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

您必须在父容器上添加一个 position: relative。然后把.thumbnail:hover span的top和left属性改成0，还加一个right: 0。要使 absolute 居中定位 div（放大图像），请添加 margin: 0 auto。最后将该元素的宽度设置为 max-content.

CSS:

.gallerycontainer {
  position: relative;
}

.thumbnail:hover span {
    visibility: visible;
    top: 0;
    left: 0;
    right: 0;
    z-index: auto;
    margin: 0 auto;
    width: max-content;
}

设置缩略图悬停跨度放大图像位置

Set thumbnail hover span enlarged image position

html

css

image

image-gallery