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

主页 M

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

2020-07-16 网页编程网 网页编程网

定宽不定高，但是用了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>

阅读原文

阅读 3556

123 显示电脑版