Question

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

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

这是我的HTML代码

--no-model

绝对做法

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

这是我的DEMO1和CSS。

mix phoenix.gen.json/html

相对方法

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

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

<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>

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

Answer 1

由于margin-right: 8px; Plunkr，您需要top: 8px; left: 8px;：

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

稍微偏离主题，但是...... 以防万一您对使用CSS模拟onclick事件感兴趣，请参阅此{{3 }}

Answer 2

请参阅您的插件的此更新。

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;
}

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

响应，纯CSS悬停图像库

2 个答案: