<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section id="gallary">
<div class="container">
<div class="pageHeader text-center">
<h1 class="pageTitle wow fadeInLeft">Our School <b>Gallary</b></h1>
<h4 class="page-subTitle wow fadeInRight">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
<div class="underline wow fadeInUp">
<span class="line"></span>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 gallary-item wow fadeInLeft">
<div class="thumb-shadow">
<a href="#gallaryModal1" class="gallary-link" data-toggle="modal">
<div class="gallary-hover">
<div class="gallary-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="http://placehold.it/400x290/FAFAFA/CCC" class="img-responsive" alt="">
</a>
<div class="gallary-caption">
<h4>Gallary 1</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 gallary-item wow fadeInLeft">
<div class="thumb-shadow">
<a href="#gallaryModal1" class="gallary-link" data-toggle="modal">
<div class="gallary-hover">
<div class="gallary-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="http://placehold.it/400x290/FAFAFA/CCC" class="img-responsive" alt="">
</a>
<div class="gallary-caption">
<h4>Gallary 2</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 gallary-item wow fadeInRight">
<div class="thumb-shadow">
<a href="#gallaryModal1" class="gallary-link" data-toggle="modal">
<div class="gallary-hover">
<div class="gallary-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="http://placehold.it/400x290/FAFAFA/CCC" class="img-responsive" alt="">
</a>
<div class="gallary-caption">
<h4>Gallary 3</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 gallary-item wow fadeInRight">
<div class="thumb-shadow">
<a href="#gallaryModal1" class="gallary-link" data-toggle="modal">
<div class="gallary-hover">
<div class="gallary-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="http://placehold.it/400x290/FAFAFA/CCC" class="img-responsive" alt="">
</a>
<div class="gallary-caption">
<h4>Gallary 4</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 gallary-item wow fadeInLeft">
<div class="thumb-shadow">
<a href="#gallaryModal1" class="gallary-link" data-toggle="modal">
<div class="gallary-hover">
<div class="gallary-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="http://placehold.it/400x290/FAFAFA/CCC" class="img-responsive" alt="">
</a>
<div class="gallary-caption">
<h4>Gallary 5</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 gallary-item wow fadeInLeft">
<div class="thumb-shadow">
<a href="#gallaryModal1" class="gallary-link" data-toggle="modal">
<div class="gallary-hover">
<div class="gallary-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="http://placehold.it/400x290/FAFAFA/CCC" class="img-responsive" alt="">
</a>
<div class="gallary-caption">
<h4>Gallary 6</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 gallary-item wow fadeInRight">
<div class="thumb-shadow">
<a href="#gallaryModal1" class="gallary-link" data-toggle="modal">
<div class="gallary-hover">
<div class="gallary-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="http://placehold.it/400x290/FAFAFA/CCC" class="img-responsive" alt="">
</a>
<div class="gallary-caption">
<h4>Gallary 7</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 gallary-item wow fadeInRight">
<div class="thumb-shadow">
<a href="#gallaryModal1" class="gallary-link" data-toggle="modal">
<div class="gallary-hover">
<div class="gallary-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="http://placehold.it/400x290/FAFAFA/CCC" class="img-responsive" alt="">
</a>
<div class="gallary-caption">
<h4>Gallary 8</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
body {
padding: 50px;
background-color: #ECEEF0;
}
/*GALLARY*/
#gallary .gallary-item {
right: 0;
margin: 0 0 15px;
}
#gallary .gallary-item .gallary-link {
display: block;
position: relative;
margin: 0 auto;
max-width: 400px;
}
#gallary .thumb-shadow {
background-color: #FFF;
box-shadow: 0 1px 1px #DDD;
}
#gallary .gallary-item:hover .thumb-shadow {
box-shadow: 0 2px 10px #E9E9E9;
-webkit-box-shadow: 0 2px 10px #E9E9E9;
-moz-box-shadow: 0 2px 10px #E9E9E9;
}
#gallary .gallary-item .gallary-link .gallary-hover {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(235, 74, 78, 0.8);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
#gallary .gallary-item .gallary-link .gallary-hover:hover {
opacity: 1;
}
#gallary .gallary-item .gallary-link .gallary-hover .gallary-hover-content {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
font-size: 20px;
color: #fff;
}
#gallary .gallary-item .gallary-link .gallary-hover .gallary-hover-content i {
margin-top: -12px;
}
#gallary .gallary-item .gallary-caption {
padding: 10px 12px;
}
#gallary .gallary-item .gallary-caption h4 {
margin: 5px 0;
font-size: 16px;
font-weight: 600;
}
#gallary .gallary-item .gallary-caption p {
margin: 0;
font-size: 14px;
}
#gallary * {
z-index: 2;
}
/*GALLARY MODAL*/
.gallary-modal .modal-content {
padding: 50px 0;
border: 0;
border-radius: 0;
text-align: center;
box-shadow: none;
min-height: 100%;
}
.gallary-modal .modal-content h2 {
margin-bottom: 15px;
font-size: 3em;
}
.gallary-modal .modal-content p {
margin-bottom: 30px;
}
.gallary-modal .modal-content p.item-intro {
margin: 20px 0 30px;
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
font-style: italic;
}
.gallary-modal .modal-content ul.list-inline {
margin-top: 0;
margin-bottom: 30px;
}
.gallary-modal .modal-content img {
margin-bottom: 30px;
}
.gallary-modal .close-modal {
position: absolute;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
background-color: transparent;
cursor: pointer;
}
.gallary-modal .close-modal:hover {
opacity: .3;
}
.gallary-modal .modal-backdrop {
display: none;
opacity: 0;
}
.lr {
z-index: 1051;
width: 1px;
height: 75px;
margin-left: 35px;
background-color: #222;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.lr .rl {
z-index: 1052;
width: 1px;
height: 75px;
background-color: #222;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.btn-danger {
border-color: #EB4A4E;
background-color: #EB4A4E;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
border-color: #F9484D;
background-color: #F9484D;
}
@media (min-width: 768px) {
#gallary .gallary-item {
margin: 0 0 30px;
}
}
