Image Gallery

1<div class="container py-5">
2  <h2 class="fw-bold text-center mb-5">Photo Gallery</h2>
3  <div class="row g-3">
4    <div class="col-md-4">
5      <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:1;">
6        <img src="https://picsum.photos/seed/g1/400/400" class="w-100 h-100 object-fit-cover" alt="Gallery 1">
7        <div class="position-absolute inset-0 d-flex align-items-center justify-content-center opacity-0 transition-all bg-dark bg-opacity-50 rounded-3" style="top:0;left:0;right:0;bottom:0;transition:opacity .3s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0">
8          <span class="text-white fw-semibold">View</span>
9        </div>
10      </div>
11    </div>
12    <div class="col-md-4">
13      <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:1;">
14        <img src="https://picsum.photos/seed/g2/400/400" class="w-100 h-100 object-fit-cover" alt="Gallery 2">
15      </div>
16    </div>
17    <div class="col-md-4">
18      <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:1;">
19        <img src="https://picsum.photos/seed/g3/400/400" class="w-100 h-100 object-fit-cover" alt="Gallery 3">
20      </div>
21    </div>
22    <div class="col-md-6">
23      <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:16/9;">
24        <img src="https://picsum.photos/seed/g4/800/450" class="w-100 h-100 object-fit-cover" alt="Gallery 4">
25      </div>
26    </div>
27    <div class="col-md-6">
28      <div class="position-relative overflow-hidden rounded-3" style="aspect-ratio:16/9;">
29        <img src="https://picsum.photos/seed/g5/800/450" class="w-100 h-100 object-fit-cover" alt="Gallery 5">
30      </div>
31    </div>
32  </div>
33</div>