<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="gallery">
<section>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12 co-xs-12 gal-item">
<div class="box">
<a title="playa" class="link-gallery">
<img class="img-gallery modal-img" src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80">
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 co-xs-12 gal-item">
<div class="box">
<a title="flores" class="link-gallery">
<img class="img-gallery" src="https://images.unsplash.com/photo-1515362778563-6a8d0e44bc0b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</a>
</div>
</div>
<!--</div>-->
<!--<div class="row">-->
<div class="col-md-4 col-sm-6 co-xs-12 gal-item">
<div class="box">
<a title="cascada" class="link-gallery">
<img class="img-gallery" src="https://images.unsplash.com/photo-1444201983204-c43cbd584d93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 co-xs-12 gal-item">
<div class="box">
<a title="rocas" class="link-gallery">
<img class="img-gallery" src="https://images.unsplash.com/photo-1549294413-26f195200c16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80">
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 co-xs-12 gal-item">
<div class="box">
<a title="rocas" class="link-gallery">
<img class="img-gallery" src="https://images.unsplash.com/photo-1531003300514-1976481c521e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjUzMjV9&auto=format&fit=crop&w=1500&q=80">
</a>
</div>
</div>
<!--</div>
<div class="row">-->
<div class="col-md-4 col-sm-6 co-xs-12 gal-item">
<div class="box">
<a title="cascada" class="link-gallery">
<img class="img-gallery" src="https://images.unsplash.com/photo-1488805990569-3c9e1d76d51c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</a>
</div>
</div>
<div class="col-md-8 col-sm-12 co-xs-12 gal-item">
<div class="box">
<a title="cancha en el bosque" class="link-gallery">
<img class="img-gallery" src="https://images.unsplash.com/photo-1560200353-ce0a76b1d438?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80">
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div id="myModal" class="modal">
<!-- Boton para cerrar el modal -->
<span class="close">×</span>
<!-- Imagen a mostrar -->
<span class="zoom" id="img-zoom" style="position: relative; overflow: hidden;">
<img class="modal-content" id="img01">
</span>
<!-- Descripcion de la imagen -->
<div id="caption">hola</div>
</div>
</div>
body {
font-family: 'Quicksand', sans-serif;
}
.gal-container {
padding: 12px;
}
.gal-item {
overflow: hidden;
padding: 3px;
}
.gal-item .box {
height: 350px;
overflow: hidden;
}
.box img {
height: 110%;
width: 110%;
top: -10%;
object-fit: cover;
-o-object-fit: cover;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}
.box:hover img{
transform: scale(1.1);
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}
.gal-item a:focus {
outline: none;
}
.gal-item a{
cursor: pointer;
}
.gal-item a::after {
content: "\f00e";
font-family: "FontAwesome";
opacity: 0;
background-color: rgba(0, 0, 0, 0.75);
position: absolute;
right: 3px;
left: 3px;
top: 3px;
bottom: 3px;
text-align: center;
line-height: 350px;
font-size: 30px;
color: #fff;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}
.gal-item a:hover:after {
opacity: 1;
}
.modal-open .gal-container .modal {
background-color: rgba(0,0,0,0.4);
}
.modal-open .gal-item .modal-body {
padding: 0px;
}
.modal-open .gal-item button.close {
position: absolute;
width: 25px;
height: 25px;
background-color: #000;
opacity: 1;
color: #fff;
z-index: 999;
right: -12px;
top: -12px;
border-radius: 50%;
font-size: 15px;
border: 2px solid #fff;
line-height: 25px;
-webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);
box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);
}
.modal-open .gal-item button.close:focus {
outline: none;
}
.modal-open .gal-item button.close span {
position: relative;
top: -3px;
font-weight: lighter;
text-shadow: none;
}
.gal-container {
width: 80%;
}
@media (min-width: 768px) {
.gal-container .modal-dialog {
width: 55%;
margin: 50 auto;
}
}
@media (max-width: 768px) {
.gal-container .modal-content {
height: 250px;
}
}
/* Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
$(document).ready(function() {
$('.link-gallery').click(function(){
var descripcion = $(this).attr('title');
$('#caption').html(descripcion);
var img = $(this).find('img');
var src = img.attr('src')
$('#img01').attr('src', src);
$('#myModal').css('display','block');
$('.modal-backdrop').remove();
});
$('.close').click(function(){
$('#myModal').css('display','none');
});
});
