Responsive Masonry Gallery Using CSS & HTML | Masonry layout with CSS3.

January 8, 2021 12:42 pm

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