We have created gallery section in masonry layout using column-count property and have used some hover effects with CSS transform and transition.
Masonry CSS is very easy to understand.
This is responsive masonry using html CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<section class="photo_gallery">
<div class="container">
<h2>Photo Gallery</h2>
<ul class="photo_list">
<li>
<div class="imgae_box">
<img src="images/1.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/2.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/3.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/4.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/5.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/6.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/7.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/8.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/9.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/10.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/11.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/12.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/13.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
<li>
<div class="imgae_box">
<img src="images/14.jpg"/>
<div class="pic_title">
Some Title
</div>
</div>
</li>
</ul>
</div>
</section>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');
*{
box-sizing: border-box;
}
body{
margin:0;
font-family: 'Oswald', sans-serif;
}
.container{
max-width: 1170px;
padding: 0px 15px;
margin:0 auto;
}
.photo_gallery{
padding: 20px 0px;
}
.photo_gallery h2{
font-size: 40px;
padding-bottom: 20px;
text-align: center;
}
.photo_list{
padding: 0px;
list-style: none;
column-count: 4;
column-gap: 0;
line-height: 0.5;
}
.photo_list li{
display: inline-block;
}
.photo_list img{
max-width: 100%;
filter: grayscale(100%);
transform:scale(1.2);
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
transition:all ease 0.3s;
-webkit-transition:all ease 0.3s;
-ms-transition:all ease 0.3s;
}
.photo_gallery .pic_title{
background:rgba(0, 0,0, 0.6);
color: #fff;
padding: 10px;
text-align: center;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
font-size: 14px;
transform:translateY(50px);
-webkit-transform:translateY(50px);
-ms-transform:translateY(50px);
transition:all ease 0.3s 0.3s;
-webkit-transition:all ease 0.3s 0.3s;
-ms-transition:all ease 0.3s 0.3s;
}
.photo_gallery .imgae_box{
position: relative;
overflow: hidden;
}
.photo_gallery .imgae_box:hover > .pic_title{
transform:translateY(0px);
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
}
.photo_gallery .imgae_box:hover >img{
filter: grayscale(0);
transform:scale(1);
-webkit-transform:scale(1);
-ms-transform:scale(1);
}
@media(max-width:768px){
.photo_list{
column-count:2;
}
}
@media(max-width:480px){
.photo_list{
column-count:1;
}
.photo_gallery h2{
font-size: 20px;
margin: 0px;
padding-bottom: 15px;
}
}
If you want to know in detail, Please subscribe to our channel http://bit.ly/35lsaxQ