マウスオーバーでテキストを表示しCSSでモーダルウィンドウ風にする方法

Question

前提・実現したいこと

「CSSでマウスホバー時に文字列を表示するエフェクト」
を使用した際にクリックでモーダルウィンドウ風に画像をポップアップする方法がわかりません。CSSのみで実装したく・・・

該当のソースコード

試したこと

<div class="sample1">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

.sample1 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
	font-size:		130%;
	text-align: 		center;
	padding-top:		80px;
	color:			#fff;
}
.sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
}

補足情報（FW/ツールのバージョンなど）

Comments

[m.ts10806]

ソースコードはマークダウンのcode機能を使ってください。質問・解説内容とコードとの境目が不明瞭となりますし、code機能では正しくコードをコピペできるようになりインデントもつけられて読みやすくなり、再現確認も容易となりますので、的確な回答が得やすくなります。

[m.ts10806]

これ、何が問題ですか？できているように思いますが。もし「ポップオーバーの状態のまま維持したい」となったらCSSだけでは無理のように思います。ホバーは容赦なく外れてオフになりますし。

[x_x]

何をクリックしたときにポップアップするのでしょうか？　また、ホバーは関係ありますか？

Answer 1

画像クリックで、ウインドウが出てくるってことだと思い、やってみましたけど、ボタンのつけ方が思いつかなかったので、出てきたウインドウクリックで閉じる感じです。

<style>
.modal {/*--画像と大きさを合わせる---*/
    width:172px;
    height:238px;
    margin:0;
}
img{
  position:absolute;    /* 絶対位置指定 */
  top:0;
  left:0;
  z-index:-1;
}
.mask{
  width:280px;
  height:280px;
}
.caption {
    font-size:130%;
    text-align:center;
    padding-top:80px;
    color:#fff;
}
.modal input+div {
    width:280px;
    height:280px;
    top:20px;
    left:0;
    visibility:hidden;
}
input label{
  position:relative;    /* 相対位置指定 */
}
.modal label input:checked+div{
  width:280px;
  height:280px;
  top:calc(50vh - 140px);
  left:calc(50vw - 140px);
  background:lightgray;
  position:absolute;    /* 絶対位置指定 */
  visibility:visible;
  transition: all 0.4s ease 0.1s;
}
.modal input{
  display: none;
}
label{
  cursor: pointer;
}
</style>
<img class="img" src="./fruit.jpg" alt="フルーツ寄せ集め" />
<div class="modal">
  <label for="toggle">
    <input type="checkbox" id="toggle">
    <div class="mask">
      <div class="caption">It's fresh !</div>
    </div>
  <label>
</div>