Tengo un problema con la transformación del cuadro de contenido en mi página web. Tengo div con tres imágenes superpuestas colocadas usando Grid, y quiero escalar una de ellas para llenar div completo en el desplazamiento del mouse. Tuve éxito con eso, sin embargo, no puedo animar esta transición. ¿Hay alguna manera de que pueda hacer eso? Ya sea utilizando el sistema de cuadrícula o no.
<div class="project-box-main" @mousewheel="onScroll" > <div class="project-image project-top-image"> <img src="@/assets/img/1_top.png" /> </div> <div class="project-image project-right-image"> <img src="@/assets/img/1_right.png" /> </div> <div class="project-image project-main-image" :class="{ fillWithMainImage: scrollPosition > 0 }"> <img src="@/assets/img/1_main.png" /> </div> </div> .project-top-image { grid-column: 4 / 15; grid-row: 1 / 10; } .project-right-image { grid-column: 14 / 18; grid-row: 3 / 13; } .project-main-image { grid-column: 6 / 17; grid-row: 8 / 20; } .fillWithMainImage img{ grid-column: 1 / 21; grid-row: 1 / 21; }Desea hacer algo como esta transition: all 0.3s ease-in-out;
.container{ display:flex; justify-content:center; height:100vh; width:100vw; align-items:center; transition: all 0.3s ease-in-out; } img{ height:auto; transition: all 0.3s ease-in-out; } img:hover{ flex-grow:1 } <div class="container"> <img src="https://loremflickr.com/640/360" width="400" alt=""/> </div>