CSS图片廊

最新推荐文章于 2024-07-04 07:10:19 发布

weixin_34281477

最新推荐文章于 2024-07-04 07:10:19 发布

阅读量143

点赞数

原文链接：https://segmentfault.com/a/1190000015691154

版权

CSS图片廊

根据元素的浮动，将图片所在div放在一行，设置悬浮样式hover

代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>图片廊</title>![图片描述][1]
    <style>        
.box{
    width:928px;
    margin:0 auto;
    border:1px solid #ccc;
    overflow:hidden;
}
.tupian{
    width:200px;
    float:left;
    border:1px solid #ccc;
    margin:15px;
} 
.tupian div img{
    width:100%;
}
.tupian p{
    text-align:center;
}
.tupian:hover{
    border-color:#000;
}
.tupian:hover img{
    opacity:0.7;
}
    </style>
</head>
<body>
    <div class="box">
        <div class="tupian">
            <div><img src="images/demo1.jpg"/></div>
            <p>sfdsfds</p>
        </div>
        <div class="tupian">
            <div><img src="images/demo2.jpg"/></div>
            <p>sfdsfds</p>
        </div>
        <div class="tupian">
            <div><img src="images/demo3.jpg"/></div>
            <p>sfdsfds</p>
        </div><div class="tupian">
            <div><img src="images/demo4.jpg"/></div>
            <p>sfdsfds</p>
        </div>    
    </div>
</body>
</html>

运行结果如下图：

图片描述

技术要点

悬浮的时候改变图片的透明度
悬浮后清除浮动影响

持续更新，欢迎大家指教！

weixin_34281477

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS图片廊

CSS图片廊根据元素的浮动，将图片所在div放在一行，设置悬浮样式hover代码如下：<!doctype html><html><head> <meta charset="utf-8"/> <title>图片廊</title>![图片描述][...
复制链接

扫一扫