How to Make a Responsive Waterfall Image Display in CSS3

How to Make a Responsive Waterfall Image Display in CSS3: BY David4 Nov,2020; Tags:
CSS3 Image

Introduction

Nowadays, web applications are accessed by more and more mobile devices. In the past, pictures on webpages were usually displayed in the form of tables, but this cannot satisfy the situation of inconsistent picture sizes. Today we introduce a CSS3-based responsive waterfall flow picture display framework, which is characterized by a good display on the computer and mobile phones, and the pictures also have special effects such as tilt and filter.

How to Make a Responsive Waterfall Image Display in CSS3

Instructions

HTML Body Code

<div id="waterfall">
   <span><img src="./imgs/1.jpg" ></span>
   <span><img src="./imgs/2.jpg" ></span>
   <span><img src="./imgs/3.jpg" ></span>
   <span><img src="./imgs/4.jpg" ></span>
   <span><img src="./imgs/5.jpg" ></span>
   <span><img src="./imgs/6.jpg" ></span>
   <span><img src="./imgs/7.jpg" ></span>
   <span><img src="./imgs/8.jpg" ></span>
   <span><img src="./imgs/9.jpg" ></span>
   <span><img src="./imgs/10.jpg" ></span>
   <span><img src="./imgs/1.jpg" ></span>
   <span><img src="./imgs/2.jpg" ></span>
   <span><img src="./imgs/3.jpg" ></span>
   <span><img src="./imgs/4.jpg" ></span>
   <span><img src="./imgs/5.jpg" ></span>
   <span><img src="./imgs/6.jpg" ></span>
   <span><img src="./imgs/7.jpg" ></span>
   <span><img src="./imgs/8.jpg" ></span>
   <span><img src="./imgs/9.jpg" ></span>
</div>

Css Code

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
* {
  box-sizing: border-box;
  font-family: "微软雅黑";
}
h1 {
  text-align: center;
  padding: 50px  0;
  font-size: 32px;
  font-weight: bold;
  color: #333;
}
#waterfall {
  column-count: 3;
  width: 1200px;
  margin: 0 auto;
  column-gap: 15px;
}
#waterfall > span {
  margin-bottom: 20px;
  display: block;
  overflow: hidden;
}
#waterfall > span img {
  display: block;
  width: 100%;
  transform: rotate(4deg);
  opacity: 0.9;
  filter: saturate(150%);
}
#waterfall > span:hover img {
  transform: rotate(0deg);
  transform: scale(1.05);
  transition: all 200ms linear;
  opacity: 1;
  filter: saturate(100%);
}

VIEW NOW