-Flexbox-L1-
-HTML-
<body> <div id="wrap"> <div> <p><img src="../images/Pex1305359.jpg" alt=""></p> <h3>Illust</h3> <p>ここにはIllustの説明が入る</p> </div> <div> <p><img src="../images/Pex712618.jpg" alt=""></p> <h3>Car</h3> <p>ここにはCarの説明が入る</p> </div> </div> </body>
-CSS-
* { margin: 0; padding: 0; } img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; } #wrap { display: flex; flex-wrap: nowrap; justify-content: space-around; margin: 20px; padding: 10px; background: rgba(173, 216, 230, 0.5); } #wrap div { flex-basis: 200px; } #wrap h3 { border-bottom: groove 6px gray; font-size: 20px; } #wrap div p:last-of-type { padding-top: 5px; text-align: center; font-size: 14px; } #wrap div p:first-of-type { position: relative; } #wrap div p:first-of-type:hover::after { content: ""; display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.7); position: absolute; top: 0; left: 0; }