响应，纯CSS悬停图像库 [英] Responsive, pure CSS hover image gallery

问题描述

我想制作响应式图库。这将在缩略图悬停上显示扩展图像。 Gallery无法使用任何JS这是必需的。

I want to make responsive image gallery. That will display extended image on thumbnail hover. Gallery can't use any JS this is requirement.

但是有一点问题。图库需要响应。
这意味着扩展图像必须与响应的默认图像大小相同，并在较小的设备上调整大小。

But there is 1 little problem. Gallery needs to be responsive. That means expanded image have to be the same size as the default image that is responsive and resize on smaller devices.

这是我的html代码

<div class="container"></div>
<div class="container">

  <div id="gallery-photo-container">
    <img src="http://imgur.com/60BBDre.jpg">
    <div class="gallery-thumbnail-image">
      <img src="http://imgur.com/60BBDre.jpg">
      <div class="gallery-main-image">
        <img src="http://imgur.com/60BBDre.jpg">
      </div>
    </div>
    <div class="gallery-thumbnail-image">
      <img src="http://i.imgur.com/C7SFJxy.jpg">
      <div class="gallery-main-image">
        <img src="http://i.imgur.com/C7SFJxy.jpg">
      </div>
    </div>
    <div class="gallery-thumbnail-image">
      <img src="http://i.imgur.com/aa5kiAi.jpg">
      <div class="gallery-main-image">
        <img src="http://i.imgur.com/aa5kiAi.jpg">
      </div>
    </div>
    <div class="gallery-thumbnail-image">
      <img src="http://imgur.com/TWLJOVv.jpg">
      <div class="gallery-main-image">
        <img src="http://imgur.com/TWLJOVv.jpg">
      </div>
    </div>
  </div>
</div>

绝对做法

我几乎完成了它，使用绝对位置和顶部属性定位。但是在调整大小时，展开的图像是左侧容器的大小，从页面的右端开始。

I have almost done it, using absolute position and positioning with top attribute. But on resize expanded image is the size of left container beginning to the right end of the page.

这是我的 DEMO1 和CSS。

.gallery-thumbnail-image:hover > .gallery-main-image {
  visibility: visible;
  opacity: 1;
}

.gallery-thumbnail-image {
  display: inline-block;
}

#gallery-photo-container .gallery-thumbnail-image > img {
  width: 79px;
}

#gallery-photo-container img {
  max-width: 100%;
}

.gallery-main-image {
  position: absolute;
  visibility: hidden;
  top: 18px;
  left: 18px;
  margin-right: 8px;
}

.container {
  width: 50%;
}

#gallery-photo-container {
  border: 1px solid black;
  padding: 10px;
}

相对方法

我认为也可以通过使用相对位置和底部属性定位来完成它。但问题是缩略图容器在悬停时调整为扩展图像大小。底部属性值取决于屏幕尺寸。

I think it can be done it too, by using relative position and positioning with bottom attribute. But here the problem is that thumbnail image container is resizing to the expanded image size on hover. And the bottom attribute value is screen size dependent.

在此 DEMO2 您必须点击缩略图，因为它们正在跳跃。这里是相对方法的CSS。

In this DEMO2 you have to click on a thumbnail because they are jumping. And here is CSS for relative approach.

.gallery-thumbnail-image:hover > .gallery-main-image {
  display: block;
  opacity: 1;
}

.gallery-thumbnail-image {
  display: inline-block;
}

#gallery-photo-container .gallery-thumbnail-image > img {
  width: 79px;
}

#gallery-photo-container img {
  width: 100%;
}

.gallery-main-image {
  position: relative;
  display: none;
  bottom: 373px;
}

那么，是否可以采用这两种方法之一的响应方式？或许你有另一个想法。我期待着你的帮助。

So, could it be done responsive way with one of these two approaches? Or maybe you have another idea. I'm looking forward for your help.

推荐答案

查看此插件的更新。

https://plnkr.co/edit/6EOKiKEQcxDiuIXApPLo?p=preview

主要变化如下：

.gallery-main-image {
  position: absolute;
  display: none;
  top: 10px;
  left: 10px;
  right: 10px;
}

#gallery-photo-container {
  border: 1px solid black;
  padding: 10px;
  position: relative;
}

使用位于相对定位元素内的绝对元素。

Use of an absolute element positioned within relatively positioned element.

这篇关于响应，纯CSS悬停图像库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！