Section Intro

Markup

        <div class="section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <ul class="projects-title">
                           <li class="active" data-filter="*">All</li>
                           <li data-filter=".web">Web</li>
                           <li data-filter=".graphic">Graphic</li>
                           <li data-filter=".photo">Photo</li>
                           <li data-filter=".design">Design</li> 
                        </ul>
                    </div>
                </div>
                <div class="row projects-list">
                    <div class="col-md-4 col-sm-6 col-xs-12 web">
                        <div class="single-project-item project-bg-1">
                            <div class="project-hover">
                                <a href="#"><span class="fa fa-link"></span></a>
                                <h4>Project title <span>Art Work</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 graphic photo">
                        <div class="single-project-item project-bg-2">
                            <div class="project-hover">
                                <a href="#"><span class="fa fa-link"></span></a>
                                <h4>Project title <span>Art Work</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 design">
                        <div class="single-project-item project-bg-3">
                            <div class="project-hover">
                                <a href="#"><span class="fa fa-link"></span></a>
                                <h4>Project title <span>Art Work</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 web design">
                        <div class="single-project-item project-bg-4">
                            <div class="project-hover">
                                <a href="#"><span class="fa fa-link"></span></a>
                                <h4>Project title <span>Art Work</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 photo design">
                        <div class="single-project-item project-bg-5">
                            <div class="project-hover">
                                <a href="#"><span class="fa fa-link"></span></a>
                                <h4>Project title <span>Art Work</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 graphic web photo">
                        <div class="single-project-item project-bg-6">
                            <div class="project-hover">
                                <a href="#"><span class="fa fa-link"></span></a>
                                <h4>Project title <span>Art Work</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 design">
                        <div class="single-project-item project-bg-7">
                            <div class="project-hover">
                                <a href="#"><span class="fa fa-link"></span></a>
                                <h4>project title <span>Art Work</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 graphic">
                        <div class="single-project-item project-bg-8">
                            <div class="project-hover">
                                <a href="#"><span class="fa fa-link"></span></a>
                                <h4>Project title <span>Art Work</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12 web photo">
                        <div class="single-project-item project-bg-9">
                            <div class="project-hover">
                                <a href="#"><span class="fa fa-link"></span></a>
                                <h4>Project title <span>Art Work</span></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Style

.alignleft {
    float: left;
    margin-right: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus { outline: 0 solid }
img {
    max-width: 100%;
    height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
}
a:hover { text-decoration: none }
.single-project-item{
background-color: #ddd;
background-position: center center;
background-size: cover;
height: 300px;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.row.projects-list .col-md-4:nth-child(2) .single-project-item,
.row.projects-list .col-md-4:nth-child(4) .single-project-item,
.row.projects-list .col-md-4:nth-child(5) .single-project-item
{ 
    height: 615px;
}

.project-bg-1{background-image: url("../assets/images/fbbd9cddb3e2c39cbdf1325d77a9e6e25e60be39/35.jpg");}
.project-bg-2{background-image: url("../assets/images/d8b08c58b4e29aa0f9f5adf1389e49bffb71f2e9/36.jpg");}
.project-bg-3{background-image: url("../assets/images/a4d4b5cd372b74f9e3d06b6e9e0f7e2821bc6220/37.jpg");}
.project-bg-4{background-image: url("../assets/images/ea4170597ac15d0d004e919f2e8a49ca2ae5391d/38.jpg");}
.project-bg-5{background-image: url("../assets/images/55d9a81d4eb2d4429821308e0975abed02cda4c4/31.jpg");}
.project-bg-6{background-image: url("../assets/images/7827d10c4a591b50731b71c1477717068deac185/32.jpg");}
.project-bg-7{background-image: url("../assets/images/23f81bf0775761cdf9effd7856281446333ddaa7/43.jpg");}
.project-bg-8{background-image: url("../assets/images/4eb078e850a0e8513e700774ce700e9e85440111/33.jpg");}
.project-bg-9{background-image: url("../assets/images/d2a583fc38e359c63f708a2d5d14aa4df037613a/39.jpg");}


.projects-title {
    list-style: outside none none;
    margin: 0 0 50px;
    padding: 0;
}
.projects-title li {
color: #747475;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: 500;
padding-right: 30px;
}
.section-padding {
    padding: 80px 0;
}
.projects-list .col-md-4 {
    padding-left: 7.5px;
    padding-right: 7.5px;
}
.row.projects-list {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.project-hover {
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.single-project-item span, .single-project-item a {
    color: #03ddd6;
}
.single-project-item span {
    display: block;
    font-size: 80%;
    margin-top: 8px;
}
.single-project-item {
    color: #fff;
}
.project-hover a {
    font-size: 25px;
    position: absolute;
    right: 20px;
    top: 20px;
}
.single-project-item h4 {
    bottom: 10px;
    left: 25px;
    position: absolute;
}
.project-hover::after {
    background-color: #333;
    content: "";
    height: 100%;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    z-index: -2;
}
.projects-title .active {
  color: #03ddd6;
}
.single-project-item:hover .project-hover {
    opacity: 1;
}
/* Medium Layout: 1280px. */
@media only screen and (min-width: 992px) and (max-width: 1200px) { 
  
    
}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) { 
 
    
}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) { 
 
    
}
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) { 

}

Special Notes