【css】css图片廊

xiaoxiao2021-02-28  22

思路:利用左浮动进行排列,设置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

转载请注明原文地址: https://www.6miu.com/read-450334.html

最新回复(0)