-Flexbox-L3-
-HTML-
<body> <section> <h2>マウスを重ねると写真がくっきりと現れる</h2> <div> <p><img src="../images/Pex3148118.jpg" alt=""></p> <p>●●Photo1●●</p> </div> <div> <p><img src="../images/Pex949586.jpg" alt=""></p> <p>●●Photo2●●</p> </div> </section> </body>
-CSS-
* { margin: 0; padding: 0; } img { width: 100%; height: 100%; object-fit: cover; } /* section */ section { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 50px 0; } section h2 { flex-basis: 100%; text-align: center; } section div { flex-basis: 300px; margin: 5px; } section div p:first-of-type { position: relative; } section div p:first-of-type::before { content: ""; display: block; width: 100%; height: 100%; background: rgba(255,255,255,.7); position: absolute; top: 0; left: 0; } section div p:first-of-type:hover::before { background: rgba(255,255,255,.0); } section div p:last-of-type { text-align: center; }