fixed image transparency and color

gallery/index.html

@@ -93,41 +93,47 @@ <h1 class="main-header no-select">
 								<div class="inner-nav">
 									<a class="d-block mb-4 no-barba" data-fancybox="images"
 										href="/resources/imgs/fun-times/heart-cards.JPG">
-										<div class="overlay">
-											<img class="img-fluid" src="/resources/imgs/fun-times/smaller/heart-cards.jpg" />
-										</div>
+											<img class="img-fluid img1" src="/resources/imgs/fun-times/smaller/heart-cards.jpg" />
 									</a>
 								</div>
 								<div class="inner-our-members">
 									<a class="d-block mb-4 no-barba" data-fancybox="images"
 										href="/resources/imgs/fun-times/robot-boys.JPG">
-										<div class="overlay">
-											<img class="img-fluid" src="/resources/imgs/fun-times/smaller/robot-boys.jpg" />
-										</div>
+											<img class="img-fluid img1" src="/resources/imgs/fun-times/smaller/robot-boys.jpg" />
 									</a>
 								</div>
 							</div>
 							<div class="col-6 col-lg-4">
+								<div class = "inner-what-is-tsa">
 								<a class="d-block mb-4 no-barba" data-fancybox="images"
 									href="/resources/imgs/fun-times/sandeep-and-aziz-the-younger.jpg">
-									<img class="img-fluid" src="/resources/imgs/fun-times/smaller/sandeep-and-aziz-the-younger.jpg" />
+									<img class="img-fluid img1" src="/resources/imgs/fun-times/smaller/sandeep-and-aziz-the-younger.jpg" />
 								</a>
+							</div>
+							<div class = "inner-home">
 								<a class="d-block mb-4 no-barba" data-fancybox="images" href="/resources/imgs/fun-times/shrey.JPG">
-									<img class="img-fluid" src="/resources/imgs/fun-times/smaller/shrey.jpg" />
+									<img class="img-fluid img1" src="/resources/imgs/fun-times/smaller/shrey.jpg" />
 								</a>
+							</div>
+							<div class = "inner-stem">
 								<a class="d-block mb-4 no-barba" data-fancybox="images"
 									href="/resources/imgs/fun-times/bruce-and-justin.JPG">
-									<img class="img-fluid" src="/resources/imgs/fun-times/smaller/bruce-and-justin.jpg" />
+									<img class="img-fluid img1" src="/resources/imgs/fun-times/smaller/bruce-and-justin.jpg" />
 								</a>
 							</div>
+							</div>
 							<div class="col-6 col-lg-4">
+							<div class = "inner-nav">
 								<a class="d-block mb-4 no-barba" data-fancybox="images" href="/resources/imgs/fun-times/club-fair.JPG">
-									<img class="img-fluid" src="/resources/imgs/fun-times/smaller/club-fair.jpg" />
+									<img class="img-fluid img1" src="/resources/imgs/fun-times/smaller/club-fair.jpg" />
 								</a>
+							</div>
+							<div class = "inner-our-members">
 								<a class="d-block mb-4 no-barba" data-fancybox="images" href="/resources/imgs/fun-times/jeremiah3.jpg">
-									<img class="img-fluid" src="/resources/imgs/fun-times/smaller/jeremiah3.jpg" />
+									<img class="img-fluid img1" src="/resources/imgs/fun-times/smaller/jeremiah3.jpg" />
 								</a>
 							</div>
+							</div>
 						</div>
 					</div>
 				</div>

main.js

@@ -25,7 +25,7 @@ $(document).ready(function () {
 
   $('[data-fancybox="images"]').fancybox({
     animationEffect: "zoom-in-out",
-    parentEl: '.gallery-container',
+    parentEl: 'body',
     padding: 0,
     helpers: {
       overlay: {