How can i achieve transformation of overlapping images?

user_9630821 0
Viewed 38

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; 
}
vue.js css html javascript
1 Answers

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>

user_143674160
Related