Smooth hover animation and change prespective

[animationuser1]

I am trying to create an effect so when the user hovers over the image , the image becomes centred and the other one changes perspective.

 

so here is the initial state of the two images:

 

If user hovers over the first image, this happens:

See the Pen xxwBxJr by user83752321 (@user83752321) on CodePen

 

if user hovers over the second image, this happens:

See the Pen bGVZNGG by user83752321 (@user83752321) on CodePen

 

I want to make this transition smooth, using just css hover wont make it smooth

thanks for help in advance

See the Pen ExVMxRW by user83752321 (@user83752321) on CodePen

[ZachSaucier]

Hey animationuser1. What are you having trouble with? We're happy to help with specific questions

 

If you only have two images you're going between, I'd likely create a timeline for the animation from one to the other and inside of the mouseenter callbacks control the timeline's progress/state. I talk more about how to do that in my article on animating efficiently.

[animationuser1]

@ZachSaucier

thank you, is there any past codepen similar to what I shared which I can use to start?

[ZachSaucier]

6 minutes ago, animationuser1 said:

is there any past codepen similar to what I shared which I can use to start?

Not too similar to that effect, no. What you're wanting is pretty specific  Are you wanting it to be responsive? If so this pen may help:

See the Pen WwgQEV by osublake (@osublake) on CodePen

 

Here's pseudo-code for how you might set it up:

See the Pen rNORVOq?editors=0010 by GreenSock (@GreenSock) on CodePen