■■■ 可能？不可能？ ■■■ 可能。 やり方としては、 ──────────────── (1) ::before、::after 擬似要素の背景に radial-gradient() で穴をあける (2) 中（マスク）に SVG で穴を空けた図形を用意する (3) <canvas> に Javascript で穴の開いた矩形を描画する …… ──────────────── といった感じで、様々な方法があるけど、 今回の質問のようなケースだと、 「丸い穴を空けたマスクを被せる」という発想を逆にして、 「コンテンツを丸く切り抜く」という方法にした方が、 HTML では推奨されていない装飾目的の不要な空要素や、 タグの囲い込みなどを使わずに簡潔に実装できる。 実装のイメージとしては添付画像の通り。 ■■■ 実施例 ■■■ 解説の前に、 先にソースコード全体の実施例を示しておく。 ─[ HTML ]────────── <!-- ── 覗き穴コンテンツ ── --> <section class="peep"> <button>覗く</button> <div>いやーっ！<br>見ないでぇーっ＞＜</div> </section> ─[ CSS ]─────────── /* ==== 覗き穴コンテンツ ==== */ .peep { position: relative; display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background: #000; overflow: hidden; } /* ==== 覗き穴コンテンツ｜ボタン ==== */ .peep > button { position: absolute; left: 10px; top: 10px; z-index: 100; } /* ==== 覗き穴コンテンツ｜穴 ==== */ .peep > div { flex: 0 0 auto; width: 0px; height: 0px; border-radius: 50%; background: #fce; overflow: hidden; transition: all 0.4s; } .peep button:active ~ div { width: 180px; height: 180px; } /* ==== 覗き穴コンテンツ｜穴｜中身 ==== */ .peep > div { display: flex; justify-content: center; align-items: center; white-space: nowrap; color: red; } ──────────────── ■■■ 解説 ■■■ 【 HTML 】 HTML としては、 覗き穴コンテンツを <section> などで囲い、 その中に、 ボタン用の <button> タグと、 コンテンツ用に <div> タグなどを入れる。 <section> には、 CSS でセレクタとして指名するために適当なクラス名を付与しておく。 ──────────────── <section class="peep"> <button>ボタン</button> <div>コンテンツ</div> </section> ──────────────── 重なり順としては、 ──────────────── ・無地背景：<section class="peep"> ・コンテンツ（穴）：<div> ・ボタン：<button> ──────────────── の順に重ねて、 コンテンツ <div> のフチを覗き穴のフチとみなして、 コンテンツ <div> の大きさを 例えば 0px ⇔ 200px のように切替えることで、 穴が開いたり塞がったりしているように見せる。 【 CSS 】 外枠の <section class="peep"> は、 中の <button> をレイヤー化した際に、 座標の基準となるように「position:relative」を指定し、 縦横サイズや背景色を指定しておく。 また、 サイズが変化するコンテンツ（穴）を中央に固定配置するために、 display:flex で内部をフレックスレイアウトに切替え、 justify-content, align-items を center に指定。 さらに、 コンテンツ（穴）が大きくなってもコンテンツがはみ出さないように、 overflow:hidden も指定しておく。 ─────────────── .peep { position: relative; display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background: #000; overflow: hidden; /*★*/ } ──────────────── ボタンについては、 position:absolute でレイヤー化して、 適当な位置に配置する。 z-index を適宜指定してコンテンツの <div> よりも手前に表示する。 ──────────────── .peep > button { position: absolute; left: 10px; top: 10px; z-index: 100; } ──────────────── コンテンツ（穴）の <div> は、 「flex: 0 0 auto」でフレックスレイアウトによる伸縮を禁止し、 縦横サイズを 0px にしたうえで、 広げたときに円になるように border-radius:50% にしておく。 コンテンツの背景色も適宜指定して、 コンテンツが穴の内部だけで表示されるように overflow:hidden にする。 穴の 開／閉 をアニメーションさせたい場合は、 tansition を指定しておく。 ──────────────── .peep > div { flex: 0 0 auto; width: 0px; height: 0px; border-radius: 50%; background: #fce; overflow: hidden; transition: all 0.4s; } ──────────────── 「ボタンを押しているときに穴が開く」ようにするんで、 押されているボタン（button:active）よりも 後にある（~）コンテンツ <div> に対して、 縦横サイズを指定して 0px だった穴を大きくする。 ──────────────── .peep button:active ~ div { width: 180px; height: 180px; } ──────────────── 以上で、 ボタンを押して穴を空ける仕組みは完成。 あとは、 コンテンツ <div> の中身を適宜構成すればいいだけ。