I have a problem with transforming content box in my webpage. I have div with three overlapping images positioned using Grid, and i want to scale one of them to fill whole div on mouse scroll. I succeeded with that, however i can't animate this transition. Is there any way i can do that? Either using grid system or not.
<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;
}
You want to do something like this use 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>