-hover-L1-
-HTML-
<body> <div id="wrap" class="clearfix"> <div> <p><a href="#"><img src="images/Pex1305359.jpg" alt="" width="200" height="150"></a></p> <h3>Illust</h3> <p>ここにはIllustの説明が入る</p> </div> <div> <p><a href="#"><img src="images/Pex712618.jpg" alt="" width="200" height="150"></a></p> <h3>Car</h3> <p>ここにはCarの説明が入る</p> </div> </div> </body>
-CSS-
* { margin: 0; padding: 0; } .clearfix:after { content: ""; display: block; clear: both; } body { background: url(images/Bg-icon100.jpg); } #wrap { width: 400px; margin: 20px; padding: 10px; background: white; } #wrap div { width: 195px; float: left; } #wrap div:not(:last-of-type){ margin-right: 10px; } #wrap div p img { width: 100%; vertical-align: bottom; } #wrap div h3 { border-bottom: groove 5px gray; font-size: 20px; } #wrap div p:last-of-type { padding: 10px 5px; font-size: 14px; } a { display: block; position: relative; } a:hover:after { content: ""; display: block; width: 195px; height: 150px; background: rgba(255,255,255,0.7); position: absolute; top: 0; left: 0; }