前提・実現したいこと
「CSSでマウスホバー時に文字列を表示するエフェクト」
を使用した際にクリックでモーダルウィンドウ風に画像をポップアップする方法がわかりません。CSSのみで実装したく・・・
該当のソースコード
試したこと
html
1<div class="sample1"> 2 <img src="./fruit.jpg" alt="フルーツ寄せ集め" /> 3 <div class="mask"> 4 <div class="caption">It's fresh !</div> 5 </div> 6</div>
CSS
1.sample1 { 2 width: 280px; 3 height: 188px; 4 overflow: hidden; 5 margin: 10px 8px 10px 16px; 6 position: relative; /* 相対位置指定 */ 7} 8.sample1 .caption { 9 font-size: 130%; 10 text-align: center; 11 padding-top: 80px; 12 color: #fff; 13} 14.sample1 .mask { 15 width: 100%; 16 height: 100%; 17 position: absolute; /* 絶対位置指定 */ 18 top: 0; 19 left: 0; 20 opacity: 0; /* マスクを表示しない */ 21 background-color: rgba(0,0,0,0.4); /* マスクは半透明 */ 22 -webkit-transition: all 0.2s ease; 23 transition: all 0.2s ease; 24} 25.sample1:hover .mask { 26 opacity: 1; /* マスクを表示する */ 27} 28