<!-- Default Style -->
	<div class="card">
		<div class="card_img">
			<a href="assets/img/gallery/gallery1.jpg" data-fancybox="images">
			    <img class="img-full" src="assets/img/gallery/gallery1.jpg" />
			</a>
		</div>
	</div>

	<!-- With Hover overlay -->
	<div class="card">
		<div class="card_img">
			<a href="assets/img/gallery/gallery1.jpg" data-fancybox="images">
			    <img class="img-full" src="assets/img/gallery/gallery1.jpg" />
				<div class="hover-overlay">
					<h4 class="">Image Title Here</h4>
				</div>
			</a>
		</div>
	</div>

	<!-- With overlay icon -->
	<div class="card_img">
		<a href="assets/img/gallery/gallery1.jpg" data-fancybox="images">
		    <img class="img-full" src="assets/img/gallery/gallery1.jpg" />
		    <div class="hover-overlay overlay-flex">
				<i class="overlay-icon fa fa-plus"></i>
				<h4 class="">Photo title here</h4>
			</div>
		</a>
	</div>

						

How to use

• Modal image gallery is designed using Fancybox Jquery plugin. Read the user documentation properly
• You can call fancybox through data- attribute as shown in the code example.
• You can use your own class names to customize style