レスポンシブな、純粋なCSSホバー画像ギャラリー

Question

私は反応的な画像ギャラリーを作りたいと思います。それは、サムネイルのホバー上に拡大画像を表示します。ギャラリーはJSを使用することはできません。これは要件です。

しかし、少し問題があります。ギャラリーは反​​応が必要です。 これは、展開されたイメージが、より小さいデバイスで応答性とサイズが変更されるデフォルトイメージと同じサイズでなければならないことを意味します。ここで

は私の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> 

絶対的なアプローチ

である私はほとんどトップ属性で絶対位置と位置決めを使用して、それを行っています。しかし、サイズ変更された拡大イメージは、ページの右端から始まる左のコンテナのサイズです。

ここは私の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; 
} 

相対的なアプローチ

私はそれが下の属性との相対位置と位置決めを使用して、あまりにもそれを行うことができると思います。しかし、ここでの問題は、サムネイル画像コンテナが、ホバー上の拡大された画像サイズにリサイズされていることです。下の属性値は画面サイズに依存します。

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

したがって、これらの2つのアプローチのいずれかを使用して応答性の高い方法で対応できますか？あるいは別のアイデアがあるかもしれません。私はあなたの助けを楽しみにしています。

Answer 1

あなたのplunkのこのアップデートを見てください。

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

使用。

Answer 2

あなたは理由top: 8px; left: 8px;Plunkrの、margin-right: 8px;が必要です

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

ちょっとオフトピック、しかし...あなたはCSSでonclickイベントをシミュレートすることに興味を持っているだけの場合には、このSO answerを参照してください。