What methods can I use to accomplish the transformation of superimposed images?

Struggling with transforming a content box on my webpage. I have a div containing three overlapping images positioned using Grid, and I want to scale one of them to fill the entire div when scrolled over. While I managed to achieve this effect, I'm unable to animate the transition. Is there a way to animate this scaling effect? Regardless if it's related to the 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; 
}
javascripthtmlcssvue.js

Answer №1

If you're looking to achieve a similar effect, consider utilizing the CSS property 

transition: all 0.3s ease-in-out;

.wrapper{
  display:flex;
  justify-content:center;
  height:100vh;
  width:100vw;
  align-items:center;
  transition: all 0.3s ease-in-out;
}

picture{
  height:auto;
  transition: all 0.3s ease-in-out;
}

picture:hover{
 flex-grow:1
}
<div class="wrapper">
  <picture src="https://loremflickr.com/640/360"   width="400" alt=""/>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a randomized item for experimentation in NodeJs using an interface

Looking for a NodeJs package that can generate fake data in all required fields of a complex object described by a set of typescript interfaces, including arrays and sub-interfaces. Any recommendations? ...

javascriptnode.jstypescriptunit-testing

"Ensuring function outcomes with Typescript"Note: The concept of

I've created a class that includes two methods for generating and decoding jsonwebtokens. Here is a snippet of what the class looks like. interface IVerified { id: string email?: string data?: any } export default class TokenProvider implements ...

javascriptnode.jstypescriptexpress

Showcasing interactive column titles by employing angularjs in an html table

After preparing my data, I aim to showcase it in an HTML table. However, a complication arises each time the $http service is called as it returns a varying number of columns (n). Essentially, I wish to have the first row of the data serve as column names, ...

javascriptangularjsasp.net-mvc

Using JavaScript onChange event with ModelChoiceField arguments

In my Django project, I have a Students model with various fields. I created a ModelChoiceField form allowing users to select a record from the Students table via a dropdown. forms.py: class StudentChoiceField(forms.Form): students = forms.ModelChoic ...

javascriptdjangoajax

Search the database to retrieve a specific value from a multi-dimensional array

My database is structured as shown in the image below: I am attempting to retrieve tasks assigned to a specific user named "Ricardo Meireles" using the code snippet below: const getTasksByEmployee = async () => { setTasks([]); const query = qu ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

A guide on extracting href containing ampersands using Gatling

When encountering a link with ampersands in the URL during a Gatling stress test, issues may arise due to Gatling interpreting it as an entity. What can be done to work around this? For instance: Let's say you come across a webpage that contains &l ...

htmlgatling

The initial ajax request successfully connects to the file, but encounters a 404 error upon the second attempt

I am currently encountering an issue with a jQuery post function. The function is designed to run multiple times and then stop, which it has successfully done in the past. However, now the problem arises when the function tries to execute itself again afte ...

phpjavascriptjqueryajaxwordpress

the display outcome appears fuzzy and lacks sharpness

Currently, I am engaged in prototyping and showcasing data in a 3D format using three.js (version 68). The intended outcome of the entire animation is to have a collection of colored spheres representing protons and neutrons, each colored based on a specif ...

javascriptthree.jswebgl

Error Encountered: Angular JS Throwing Unhandled Injection Error

I am having trouble validating the fields in my index.html and js files. I keep seeing errors, even after trying different versions of angular-route.min.js and angular.js. AngularJs | Basic Login Form <body ng-app="myApp"> ...

javascriptjqueryhtmlangularjs

Exclude certain packages from being processed in webpack

After setting up my webpack configuration, everything was running smoothly with the specified packages in the package.json: { "peerDependencies": { "react": "16.13.1", "react-dom": "16.13.1", ...

javascriptreactjswebpackpackage.jsonstorybook

Is there a way to access and troubleshoot the complete source code within .vue files?

I've been struggling for hours trying to understand why I'm unable to view the full source of my .vue files in the Chrome debugger. When I click on webpack://, I can see the files listed there like they are in my project tree, but when I try to o ...

javascripttypescriptvue.jswebpack

Troubleshooting: Difficulty with svg mask function when implementing an svg image in a react.js environment

I'm attempting to achieve an effect where an image appears above a background image when hovering over it, similar to this example... https://jsfiddle.net/12zqhqod/7/ <img id="heretic" height="300px" width="300px" src="http://i.imgur.com/0bKGVYB ...

jquerycsssvgreactjsmask

Ensuring the validation of multiple ValidationObservers in Vue

In my ChangeInfo screen, I have three components representing ValidationObservers. When all three are valid, I set the variable showModal = true to display a success notification modal. However, if any of the three components have an error, showModal remai ...

vue.jsvee-validate

Including jQuery in an Angular project generated with JHipster

I am facing a challenge with integrating jQuery into my Jhipster Angular project as a newcomer to Jhipster and Angular. My goal is to customize the theme and appearance of the default Jhipster application, so I obtained a theme that uses a combination of ...

javascriptjqueryangularjhipster

What causes the burger dropdown to be concealed by additional content?

While viewing my menu on an iPhone SE in responsive mode, I noticed that all of my burger menu items are hidden except for the one that fits perfectly in the space between my header and main content. I am using Mantine with NextJS, and my layout structure ...

cssreactjsnext.jsoverflowmantine

Align your content perfectly on a full-screen slick slider

Attempting to center content over a full-screen slick slider from kenwheeler.github.io/slick/, I used a flexbox but the content remains at the edge of the viewport. It seems like an issue with the position tag in the slick CSS, but I can't figure out ...

htmlcsscenterslick.js

I am facing a challenge with AngularJS where I am unable to navigate between pages using the

I'm having issues with my route file app.js. Whenever I click on any link or button, it redirects me to books.html. What could be the mistake I'm making? var myApp = angular.module('myApp', ['ngRoute']); myApp.config([&apo ...

javascriptangularjs

Sending values to Vuex getters from a Vuex action

I have been utilizing a Vuex getter across various components in my application. However, I recently encountered a scenario where I require slightly more intricate logic before accessing the getter, leading me to employ a Vuex Action. The challenge now is ...

javascriptvue.jsvuex

Is there a way to spin the picture but keep the container still?

Is there a way to animate the rotation of the gradient color without rotating the rhombus? I attempted using transform: rotate, but it ended up rotating the entire shape. Any suggestions on how to achieve this effect? .box { position: absolute; top ...

htmlcsscss-animations

Comparison of Angular.js formsets to Django's formset

Within Django, formsets allow for the use of multiple forms within one larger form. For example, you can add multiple books to a library formset by repeating the same book form with details such as author and title. I am looking to achieve similar functio ...

javascriptpythonangularjsdjangodjango-rest-framework