.fancy-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin-top: 30px; } .gallery-item { position: relative; overflow: hidden; border-radius: 15px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); transform: scale(1); transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; } .gallery-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 0, 150, 0.3), rgba(0, 204, 255, 0.3)); mix-blend-mode: overlay; opacity: 0; transition: opacity 0.6s ease; } .gallery-item:hover { transform: scale(1.05); filter: brightness(1.2); } .gallery-item:hover img { transform: scale(1.1) rotate(2deg); filter: grayscale(20%) } .gallery-item:hover::before { opacity: 1; } /* @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } 50% { transform: scale(1.02); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } } .gallery-item { animation: pulse 5s infinite; } */