響應式純CSS懸停圖片庫

Question

我想制作響應式圖片庫。 這將在縮略圖懸停時顯示擴展圖像。 Gallery不能使用任何JS，這是必需的。

但是有1個小問題。 畫廊需要及時響應。 這意味着擴展的圖像必須與響應的默認圖像大小相同，並在較小的設備上調整大小。

這是我的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>

絕對方法

我幾乎做到了，使用絕對位置和top屬性定位。 但是在調整大小時，展開的圖像是從頁面右端開始的左容器的大小。

這是我的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;
}

相對方法

我認為也可以通過使用相對位置和具有bottom屬性的位置來實現。 但是這里的問題是，縮略圖圖像容器在懸停時正在調整為擴展的圖像大小。 底部屬性值取決於屏幕尺寸。

在此DEMO2中，您必須單擊縮略圖，因為它們正在跳躍。 這是相對方法的CSS。

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

那么，可以使用這兩種方法之一來完成響應式嗎？ 也許您有另一個想法。 我期待着您的幫助。

Answer 1

您需要一個margin-right: 8px; ，因為top: 8px; left: 8px; top: 8px; left: 8px; Plunkr ：

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

稍微偏離主題，但是...以防萬一您有興趣使用CSS模擬onclick事件，請參見此SO答案 。

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

使用位於相對定位的元素內的絕對元素。