Estoy tratando de construir una galería de fotos para que cuando presione una foto, se superponga al sitio web, y el fondo se vuelva gris, y haya una animación de la foto que se vuelve grande.
Esta es la animación:
@keyframes img { 0% { position: static; } 100% { position: fixed; top: 10%; left: 10%; margin: auto; width: 80%; height: 80%; } }El problema es que css no anima cambiando la posición de estática a fija. ¿Hay una solución a este problema?
Intenté calcular la ubicación de la imagen. No funcionó
En las animaciones CSS, la posición no es una propiedad que se pueda animar.
Si desea ver la lista de propiedades de animaciones CSS: aquí
Sin embargo, puede usar JavaScript para obtener el mismo efecto.
Editar : HTML de ejemplo
<div class="img-container"> <div class="opened"></div> <img class="img" src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="img" src=https://images.pexels.com/photos/406014/pexels-photo-406014.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="img" src="https://images.pexels.com/photos/2023384/pexels-photo-2023384.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> <img class="img" src="https://images.pexels.com/photos/1851164/pexels-photo-1851164.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" /> </div>CSS
.img-container { width: 100%; height: 100vh; display: flex; overflow-x: hidden; flex-wrap: wrap; justify-content: center; gap: 5%; } .img-container img { width: 35vw; height: 40vh; object-fit: cover; cursor: pointer; } .img-container .opened { position: fixed; overflow: scroll; overflow-x: hidden; top: 0; left: 0; right: 0; bottom: 0; padding: 5%; display: none; } .img-container .opened.active { z-index: 100; display: inline; background-color: rgba(0, 0, 0, 0.424); } .img-container .opened img { width: 100%; height: 100%; }JS
const imgContainer = document.querySelector(".img-container"); const imgs = document.querySelectorAll(".img"); const openedDiv = document.querySelector(".opened"); const toggleImg = (e) => { // selecting the img inside opened div let clickedImgSrc = e.target.src; let imgElement = document.createElement("img"); imgElement.setAttribute("src", clickedImgSrc); openedDiv.appendChild(imgElement); openedDiv.classList.add("active"); }; const closeTheOpened = () => { openedDiv.removeChild(openedDiv.firstChild); openedDiv.classList.remove("active"); }; imgs.forEach((img) => img.addEventListener("click", toggleImg)); openedDiv.addEventListener("click", closeTheOpened);