TheCawnporeMag.github.io/gallery.css at main · diyavcodes/TheCawnporeMag.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
* {
    margin: 0;
    padding: 0;
}
body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
      background: #f8f8f8;
    }

    h1 {
        margin-top: 90px;
      text-align: center;
background: linear-gradient(135deg, #4c0b0b, #ab2424, #310808);
      color: #fff4f4;
      margin-bottom: 60px;
    }

    .gallery {
      column-count: 3; /* Change to 2 or 4 based on screen size */
      column-gap: 50px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .gallery img {
      width: 100%;
      margin-bottom: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease;
      break-inside: avoid;
    }

    .gallery img:hover {
      transform: scale(1.03);
    }

    @media (max-width: 768px) {
      .gallery {
        column-count: 2;
      }
    }

    @media (max-width: 480px) {
      .gallery {
        column-count: 1;
      }
    }
    .gallery img {
  transition: transform 0.3s ease, border 0.3s ease;
  border: 4px solid transparent;
}

.gallery img:hover {
  border: 4px solid #531611; /* You can use any color you like */
  transform: scale(1.03); /* Optional zoom effect */
}