ポップアップイメージを作成する

Question

私は同じページに複数のイメージを表示しようとしていますが、より大きなバージョンを開くことができますが、すべてのイメージは個々のイメージではなくコードで指定された最後のイメージのみを開きます。

これはおそらく私がそれを言い表すことができた最悪の方法なので、サンプルコードを分かりやすくしてください。

#check:checked ~ label #cover { 
 
    display: block; 
 
} 
 
#cover { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    display: none; 
 
} 
 
#box { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 435px; 
 
    height: 585px; 
 
    border: 5px solid silver; 
 
    background-color: white; 
 
} 
 
#imgpre { 
 
    opacity: 1.0; 
 
    transition: 0.3s; 
 
} 
 
#imgpre:hover { 
 
    opacity: 0.7; 
 
    transition: 0.3s; 
 
    cursor: pointer; 
 
}

<input type="checkbox" id="check" style="display:none;"> 
 
<label for="check"> 
 
    <img id="imgpre" src="example1preview.png" /> 
 
</label> 
 
<label for="check"> 
 
    <div id="cover"> 
 
    <div id="box"> 
 
     <img src="example1.png" /> 
 
    </div> 
 
    </div> 
 
</label> 
 
<input type="checkbox" id="check" style="display:none;"> 
 
<label for="check"> 
 
    <img src="example2preview.png" /> 
 
</label> 
 
<label for="check"> 
 
    <div id="cover"> 
 
    <div id="box"> 
 
     <img src="example2.png" /> 
 
    </div> 
 
    </div> 
 
</label>

Answer 1

重複したHTML idを（、、imgpreをカバー、ボックスをチェック）を使用しています。 IDはhtmlでは一意であり、複数回使用しないでください。

for="check"で最初のラベルをクリックすると、for="check"で2番目のラベルと同じ入力が有効になります。したがって、両方の入力に同じポップアップイメージが表示されます。

入力エレメントに異なるIDを使用し、をcover,box、imgpreと入力すると、htmlとcssに切り替わります。

ところで：これを実行するにはjavascriptを使用する必要があります。隠れたチェックボックスを使うと（つまり、複数のものを一度にアクティブにすることができます）、これは良い考えではありません。 uがしたい正確に何JavaScriptライブラリがたくさんあります（例えばhttp://fancyapps.com/fancybox/）

.checkbox:checked ~ label .cover { 
 
    display: block; 
 
} 
 
.cover { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    display: none; 
 
} 
 
.box { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 435px; 
 
    height: 585px; 
 
    border: 5px solid silver; 
 
    background-color: white; 
 
} 
 
.imgpre { 
 
    opacity: 1.0; 
 
    transition: 0.3s; 
 
} 
 
.imgpre:hover { 
 
    opacity: 0.7; 
 
    transition: 0.3s; 
 
    cursor: pointer; 
 
}

<input type="checkbox" id="check1" class="checkbox" style="display:none;"> 
 
<label for="check1"> 
 
    <img class="imgpre" src="example1preview.png" /> 
 
</label> 
 
<label for="check1"> 
 
    <div class="cover"> 
 
    <div class="box"> 
 
     <img src="example1.png" /> 
 
    </div> 
 
    </div> 
 
</label> 
 
<input type="checkbox" id="check2" class="checkbox" style="display:none;"> 
 
<label for="check2"> 
 
    <img class="imgpre" src="example2preview.png" /> 
 
</label> 
 
<label for="check2"> 
 
    <div class="cover"> 
 
    <div class="box"> 
 
     <img src="example2.png" /> 
 
    </div> 
 
    </div> 
 
</label>