Lightbox gallery style01
<!DOCTYPE html>
<html>
<head>
<title>Lightbox-gallery | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Lightbox-gallery">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" />
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
<div class="row mt-5 mx-auto text-center">
<div class="col-12"><h1 class="text-info">Lightbox</h1></div>
</div>
<div class="row mt-5 mx-auto">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-6 col-12 mb-4">
<a class="example-image-link" href="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" data-lightbox="example-set" data-title="Name of Product">
<img class="example-image img-fluid" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" title="">
</a>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-6 col-12 mb-4">
<a class="example-image-link" href="https://www.nglesson.com/assets/imgs/menu/solution-technique.jpg" data-lightbox="example-set" data-title="Name of Product">
<img class="example-image img-fluid" src="https://www.nglesson.com/assets/imgs/menu/solution-technique.jpg" alt="" title="">
</a>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-6 col-12 mb-4">
<a class="example-image-link" href="https://www.nglesson.com/assets/imgs/menu/problematique.jpg" data-lightbox="example-set" data-title="Name of Product">
<img class="example-image img-fluid" src="https://www.nglesson.com/assets/imgs/menu/problematique.jpg" alt="" title="">
</a>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-6 col-12 mb-4">
<a class="example-image-link" href="https://www.nglesson.com/assets/imgs/menu/e-learning-developpement.jpg" data-lightbox="example-set" data-title="Name of Product">
<img class="example-image img-fluid" src="https://www.nglesson.com/assets/imgs/menu/e-learning-developpement.jpg" alt="" title="">
</a>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-6 col-12 mb-4">
<a class="example-image-link" href="https://www.nglesson.com/assets/imgs/menu/CDN.jpg" data-lightbox="example-set" data-title="Name of Product">
<img class="example-image img-fluid" src="https://www.nglesson.com/assets/imgs/menu/CDN.jpg" alt="" title="">
</a>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-6 col-12 mb-4">
<a class="example-image-link" href="https://www.nglesson.com/assets/imgs/menu/media-digital.jpg" data-lightbox="example-set" data-title="Name of Product">
<img class="example-image img-fluid" src="https://www.nglesson.com/assets/imgs/menu/media-digital.jpg" alt="" title="">
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>
.example-image-link img{
width: 100%;
height: 250px;
border: 1px solid #e0e0e0;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}
.example-image-link img:hover{
border: 1px solid #000;
}
