link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/plugins/animate.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/animated-headlines.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/jquery.mb.YTPlayer.min.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/magnific-popup.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/meanmenu.min.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/nivo-slider.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/slick.css" />
<style>
.our-gallery .bg-img-2
{
background: url(images/gallery/bg-2.png)no-repeat scroll right bottom;
padding-bottom: 50px;
padding-top: 80px;
}
.col-md-offset-2
{
margin-left: 16.66666667%;
}
.our-gallery
{
position: relative;
background: url(http://www.maurizioca.com/wp-content/uploads/2015/05/hummingbird-algorithm-inbound-marketing-seo.png)no-repeat scroll left top;
background-color: #f1f1f1;
background-size: 23%;
background-position: -17px -15px;
margin-left: 41px;
margin-right: 41px;
}
.gallery-menu ul li
{
color: #535353;
cursor: pointer;
display: inline-block;
font-weight: 600;
margin-left: 35px;
text-transform: uppercase;
}
default.css:122 li
{
list-style: none;
}
.gallery-menu ul li.active
{
color: #e54c2a;
}
.single-item-gallery:hover img
{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
style.css:557 .single-item-gallery > img
{
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.single-item-gallery a
{
background: #fff none repeat scroll 0 0;
border-radius: 50%;
color: #e54c2a;
font-size: 22px;
height: 40px;
left: 0;
line-height: 40px;
margin: -20px auto 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
position: absolute;
right: 0;
text-align: center;
top: 50%;
-webkit-transform: scale(0.2);
transform: scale(0.2);
-webkit-transition: all 400ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
transition: all 400ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
width: 40px;
z-index: 999;
}
.mdi
{
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.mfp-container
{
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box;
}
</style>
<div class="our-gallery">
<div class="bg-img-2">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="section-title grey_bg mb-50 text-center">
<h2 class="mb-50">
our gallery</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation
ullamco laboris nisi.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="gallery-menu fix text-center mb-60">
<ul>
<li class="active" data-filter="*">all</li>
<li data-filter=".babylon">babylon</li>
<li data-filter=".nasa">nasa</li>
<li data-filter=".malgudi">malgudi days</li>
<li data-filter=".sweets">sweets & namkin</li>
<li data-filter=".hotel">hotel</li>
</ul>
</div>
<div class="gallery-item-box row" style="position: relative; height: 1548px;">
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30" style="position: absolute;
left: 0px; top: 0px;">
<div class="single-item-gallery">
<a href="images/gallery/1.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/1.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30" style="position: absolute;
left: 390px; top: 0px;">
<div class="single-item-gallery">
<a href="images/gallery/2.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/2.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item babylon mb-30" style="position: absolute;
left: 780px; top: 0px;">
<div class="single-item-gallery">
<a href="images/gallery/3.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/3.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30" style="position: absolute;
left: 0px; top: 258px;">
<div class="single-item-gallery">
<a href="images/gallery/4.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/4.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30" style="position: absolute;
left: 390px; top: 258px;">
<div class="single-item-gallery">
<a href="images/gallery/5.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/5.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item nasa mb-30" style="position: absolute;
left: 780px; top: 258px;">
<div class="single-item-gallery">
<a href="images/gallery/6.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/6.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30" style="position: absolute;
left: 0px; top: 516px;">
<div class="single-item-gallery">
<a href="images/gallery/7.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/7.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30" style="position: absolute;
left: 390px; top: 516px;">
<div class="single-item-gallery">
<a href="images/gallery/8.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/8.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item malgudi mb-30" style="position: absolute;
left: 780px; top: 516px;">
<div class="single-item-gallery">
<a href="images/gallery/9.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/9.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item sweets mb-30" style="position: absolute;
left: 0px; top: 774px;">
<div class="single-item-gallery">
<a href="images/gallery/10.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/10.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item sweets mb-30" style="position: absolute;
left: 390px; top: 774px;">
<div class="single-item-gallery">
<a href="images/gallery/11.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/11.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item sweets mb-30" style="position: absolute;
left: 780px; top: 774px;">
<div class="single-item-gallery">
<a href="images/gallery/12.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/12.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item sweets mb-30" style="position: absolute;
left: 0px; top: 1032px;">
<div class="single-item-gallery">
<a href="images/gallery/13.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/13.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
left: 390px; top: 1032px;">
<div class="single-item-gallery">
<a href="images/gallery/14.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/14.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
left: 780px; top: 1032px;">
<div class="single-item-gallery">
<a href="images/gallery/15.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/15.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
left: 0px; top: 1290px;">
<div class="single-item-gallery">
<a href="images/gallery/16.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/16.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
left: 390px; top: 1290px;">
<div class="single-item-gallery">
<a href="images/gallery/17.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/17.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item hotel mb-30" style="position: absolute;
left: 780px; top: 1290px;">
<div class="single-item-gallery">
<a href="images/gallery/18.jpg"><span class="plus"><i class="mdi mdi-plus"></i></span>
</a>
<img src="images/gallery/18.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
i want to display like
when i do mouse hover image color should change to oranage
and it should display + sing on mouse hover when i clicck on it it should open image
