<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Gallery Box -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- pLACE ABOVE HEAD SECTION -->
<div class="container">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="gallery_box">
<li>
<a href="#0"><img class="myPic" src="" alt="">
</a>
</li>
<li>
<a href="#0"><img class="myPic" src="" alt="">
</a>
</li>
<li>
<a href="#0"><img class="myPic" src="" alt="">
</a>
</li>
<li>
<a href="#0"><img class="myPic" src="" alt="">
</a>
</li>
<li style=" position: relative;
top: -134px;">
<a href="#0"><img class="myPic" src="" alt="">
</a>
</li>
<li>
<a href="#0"><img class="myPic" src="" alt="">
</a>
</li>
</ul>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="script.js"></script>
</div>
img{ max-width:100%;}
.gallery_box li{ width:33.333333%; max-width: 100% ; display:inline-block; float: left; text-align: center; overflow: hidden; position: relative;}
.gallery_box{ padding:0;display: flow-root;}
.gallery_box li:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.gallery_box li img{-webkit-transition: transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;}
.gallery_box li:nth-child(even) {
height: 304px;
}
.gallery_box li:nth-child(odd) {
height: 338px;
}
.gallery_box li:nth-child(odd) .box_data{ background:rgba(0,0,0,0.17) }
.gallery_box li:nth-child(even) .box_data{ background:rgba(0,44,255,0.27) }
.gallery_box .box_data{ position:absolute; top: 0; left: 0; right:0; bottom:0; color:#fff;}
.gallery_box .box_data span{ position:absolute; top: 50%; transform: translateY(-50%); left:0 ; right:0; font-size:24px;}
.gallery_box li:hover .box_data{ background:rgba(100, 255, 0, 0.55)}
//jshint esversion:6
function get_request() {
$('.myPic').each(function() {
var images = ['Gimg1.jpg', 'Gimg2.jpg', 'Gimg3.jpg', 'Gimg4.jpg', 'Gimg5.jpg', 'Gimg6.jpg', 'Gimg7.jpg',
'Gimg8.jpg', 'Gimg9.jpg', 'Gimg10.jpg', 'Gimg11.jpg', 'Gim12.jpg', 'Gi13g5.jpg', 'Gimg14.jpg'];
img = $(this);
var num= (Math.floor(Math.random() * images.length + 1 ));
img.attr('src', 'Gallery/Gimg' + num + '.jpg');
img.attr('alt', 'src: ' + img.attr('src'));
});
setTimeout(get_request, 30000);
}
get_request();
