网页编程网

www.youkud.com

当前位置：主页 >> DIV+CSS >> 正文

css3定高不定宽overflow创建BFC环境实现拉帘式遮罩相册

阅读：3554 输入：2020-07-16 15:41:02

定宽不定高，但是用了float:left，不写height，会造成父级高度塌陷。可用overflow创建BFC环境。

<style>
body{margin:0;}
.wrap{
margin: 50px auto;
width:1000px;
/*height:400px;*/
background-color:#096;
overflow: hidden;/*创建BFC环境*/
}
.content{
float: left;
position: relative;
margin: 30px;
width:262px;
height:162px;
background-color:red;
transition:.5s;
}
.content:hover{
transform: scale(1.2);/*css3比例放大*/
}
.content:hover .hide{
height: 0;
}
.images{
width:240px;
height:140px;
border:2px solid #fff;
}
.hide{
position: absolute;
top:0;
left: 0;
width:262px;
height:162px;
background-color:rgba(0,0,0,.5);
transition:.5s;
}
.content1:hover .hide{
  margin-top:80px; 
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
  <img class="images" src="1.jpg">
  <div class="hide"></div>
</div>
<div class="content">
  <img class="images" src="1.jpg">
  <div class="hide"></div>
</div>
<div class="content">
  <img class="images" src="1.jpg">
  <div class="hide"></div>
</div>
<div class="content content1">
  <img class="images" src="1.jpg">
  <div class="hide"></div>
</div>
<div class="content">
  <img class="images" src="1.jpg">
  <div class="hide"></div>
</div>
<div class="content">
  <img class="images" src="1.jpg">
  <div class="hide"></div>
</div>
</div>
</body>

上一篇：python爬取分段电影m3u8，并自动合并成mp4及删除原始片段
下一篇：python中如何请求session鉴权和token鉴权的接口

相关阅读: 3种js+css实现移动设置底部固定菜单，极简方法; div可脱离文档流的方法; CSS实现两个DIV并排居中最简代码

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens