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;
}

                                    
Vers le haut

Vers le haut

Timeline style03

Timeline style03

Timeline style02

Timeline style02

Scroll to div ID

Scroll to div ID

Nav Menu style01

Nav Menu style01

Input range slider HTML style04

Input range slider HTML style04

Image hover 05

Image hover 05

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Carousel Bootstrap4

Carousel Bootstrap4

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Ajouter une pagination1

Ajouter une pagination1