思路：利用左浮动进行排列，设置hover效果，动画自设。浮动清除使用伪元素after css:
.responsive { float: left; padding: 0 6px; width: 24%; margin: 10px auto; } /*响应式设置*/ @media only screen and (max-width: 700px) { .responsive { width: 49%; margin: 6px 0; } } @media only screen and (max-width: 500px) { .responsive { width: 100%; margin: 6px 0; } } .simg { border: 1px solid #CCCCCC; } .simg:hover { border: 1px solid #777; } .simg img { width: 100%; height: auto; } .desc { padding: 15px; text-align: center; } /*浮动清除*/ .clearfix::after { content: ""; display: table; clear: both; }html:
<div class="responsive"> <div class="simg"> <a target="_blank" href="img_fjords.jpg"> <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> </a> <div class="desc"> Add a description of the image here </div> </div> </div> <div class="clearfix"></div> <div style="padding:6px;"> <h4>重置浏览器大小查看效果</h4> </div>图像透明度-opacity
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ }总结：浮动的清除。浮动造成的影响。
原文：http://www.runoob.com/try/try.php?filename=trycss_image_gallery_responsive
