サンプルはこちらです。
CSS例
.img_list li { display: block; float: left; height: 93px; margin: 6px; padding: 0; position: relative; width: 140px; background: #FFF; } .img_list li:first-child:after, .img_list li:nth-child(2):after { background-color: rgba(0, 0, 0, 0.75); bottom: 0px; color: #fff; display: block; font-size: 11px; padding: 0; position: absolute; text-align: center; width: 100%; } .img_list li:first-child:after { content: "メイン画像"; } .img_list li:nth-child(2):after { content: "サブ画像"; }
HTML例
<ul class="img_list"> <li> <img src="http://jsrun.it/assets/m/h/d/8/mhd8t.jpg" width="140"> </li> <li> <img src="http://jsrun.it/assets/m/h/d/8/mhd8t.jpg" width="140"> </li> <li> <img src="http://jsrun.it/assets/m/h/d/8/mhd8t.jpg" width="140"> </li> </ul>