.gallery { display: flex; flex-wrap: wrap; justify-content: center; } .image-box { flex: 0 0 calc(33.33% - 20px); margin: 10px; padding: 3px; position: relative; box-sizing: border-box; background-color: #f0f0f0; overflow: hidden; transition: transform 0.3s ease-in-out; } .image-box:hover { transform: scale(1.05); } .image-box img { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); cursor: pointer; } .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; animation: pop 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } @keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .popup-image { max-width: 90%; max-height: 90%; } .close { position: absolute; top: 20px; right: 20px; font-size: 24px; color: #fff; cursor: pointer; }