* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
.list {
  width: 1000px;
  height: 500px;
  margin: 150px auto 0;
}
.list li {
  /* float:left; 可以使块级元素宽度可以被内容撑开*/
  float: left;
  /* 不给宽高是因为内容会被撑开 */
  max-width: 700px;
  height: 500px;
  box-shadow: 0 0 10px #ccc;
}

/* 未选中时可以点击范围 */
input {
  /* poacity:0；点击框透明度为0 */
  opacity: 0;
  /* cursor:pointer鼠标变为小手标记 */
  cursor: pointer;
  width: 100px;
  height: 500px;
  /* 点击时过渡效果 */
  transition: 0.2s;
}
/* 选中是宽700px */
input:checked {
  width: 700px;
}

/* 背景图no-repeat不要平铺不要重复  center/cover居中/覆盖整个li */
.list li:nth-child(1),
.list ul :nth-child(1) .bj {
  background: url(../img/1.jpg) no-repeat center/cover;
}
.list li:nth-child(2),
.list ul :nth-child(2) .bj {
  background: url(../img/2.jpg) no-repeat center/cover;
}
/* 
.list li:nth-child(1)和.list ul :nth-child(1)都是选择同一个元素，啥原理不清楚
*/
.list ul :nth-child(3),
.list ul :nth-child(3) .bj {
  background: url(../img/3.jpg) no-repeat center/cover;
}
.list ul :nth-child(4),
.list ul :nth-child(4) .bj {
  background: url(../img/4.jpg) no-repeat center/cover;
}
.list li .bj {
  /* 让全部.bj的背景变透明不显示于页面之上 */
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  /* 100vw=100%视口高度
     100vh=100%视口宽度
  */
  width: 100vw;
  height: 100vh;
  /* 此时背景层级太高盖住.list了，用z-index让层级变成负数 */
  z-index: -1;
  /* css3滤镜效果 */
  filter: blur(2.3px);
}
/* 当点击input的时候inpu的兄弟.bj的背景就不透明了，显示于页面之上 */
input[name="swith"]:checked ~ .bj {
  opacity: 1;
}