Is image hover animation possible?

Tagged: , ,

Author Posts

jjjas April 19, 2018 at 5:23 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Hello Christian!
Please see https://youtu.be/Swdi9lAYo4s I wonder if it’s possible.
Thanks a lot!

Jasmin

Sebastian April 20, 2018 at 10:39 am

Hey Jasmin,

Yes this is possible with Microthemer (hint, set transform style via custom code editor and then set transition property to transform and event to mouseover via Transition properties).

I’ve just noticed your post, and I’m about to go away for the weekend, but I will respond with a video tutorial after the weekend. I hope that’s OK!?

Cheers,
Sebastian

jjjas April 20, 2018 at 1:58 pm

Hello Sebastian!
(Very sorry, I called you Christan)

Sure, I will also be away for the weekend.
When you are back, I guess that ‘custom code’ meaning we have to enter animation custom CSS code? oh.. I have no idea.. Anyway, let’s continue next week.

Have a good weekend!

Jasmin


Sebastian April 23, 2018 at 11:50 am

Hey Jasmin,

Would you mind sending me a link to the page where you would like to apply the same hover animation effect shown in the video? I started work on a general demo, but then realised that the solution very much depends on how the images and text links have been set up (in terms of the HTML code).

If you can send me access to your site via our secure contact form I could demonstrate the process there if you prefer.

Cheers!
Sebastian

P.S. I already created a demo which shows how to enlarge images on hover using MTs transition properties, but implementing the effect shown in your video will require a few extra/different steps.

jjjas April 23, 2018 at 1:42 pm

Hello Sebastian,

Sure, just sent. It is Homepage (https://raelorg2018.wpengine.com).
What a great video. I really appreciate very much for your absolutely fantastic support! – Just little point, my animation I want to check is that only get ‘taller’ instead of scale up, if possible. 🙂 But scale-up is also nice.

By the way, You have fixed it before but history log time is back in error, I have no idea.. https://www.screencast.com/t/xQqv1xC2

Thank you!

Jasmin


Sebastian April 23, 2018 at 7:34 pm

Thanks Jasmin,

I received your email and have replied requesting some further information about which elements you want to animate on hover.

Regarding the history issue, I will investigate that tomorrow. In trying to fix the it for someone else I think I may have inadvertently broken it again for you 🙂

Cheers,
Sebastian

You must login or register to reply to this topic.