# How to achieve ZOOM rollover effect **URL:** \ **Category:** General\ **Tags:** animations\ **Created:** [June 19, 2021, 3:01am UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358 "2021-06-19T03:01:08Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![excede](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@excede](https://forum.pinegrow.com/u/excede)\ **Post date:** [June 19, 2021, 3:01am UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/1 "2021-06-19T03:01:08Z")
I’m trying to achieve the same effect as this natively in Pinegrow with Pinegrow custom animation, can anyone tell me how I can do it (or hints) please? I know how to to rollover and zoom but the tricky bit is zooming exactly wherever I rollover the image. > **[Mouseover Zoom – 12 image magnify examples – Magic Zoom Plus](https://www.magictoolbox.com/magiczoomplus/examples/)** > > 12 awesome image zoom demos! Choose the best one for YOUR SITE. Responsive, fast and mobile ready. Free trial. £29 license. Boost your sales now. Specifically the last example “Internal zoom on click”. ![Screen Shot 2021-06-19 at 1.00.02 pm](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/cb751b4eb9e7ddf5c258acbf4ce9a0e3165c7072.jpeg) Also I need a few thumbnails that change the zoom(able) image which I’m guessing I just change the image source. ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [June 19, 2021, 7:30am UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/2 "2021-06-19T07:30:34Z")
I’m not sure if this is what you’re looking for: > **[imgix/drift](https://github.com/imgix/drift)** > > Easily add "zoom on hover" functionality to your site's images. Lightweight, no-dependency JavaScript. - imgix/drift ---
**Author:** ![excede](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@excede](https://forum.pinegrow.com/u/excede)\ **Post date:** [June 19, 2021, 11:38am UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/3 "2021-06-19T11:38:11Z")
Not quite the functionality but that’s a good resource and I may be able to rework it, thank you. I was hoping that I could use pinegrow interactions so I could perfect the animation to exactly what I need without coding too much. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [June 19, 2021, 12:34pm UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/4 "2021-06-19T12:34:28Z")
Hi @excede, I’m wrestling a bit with this now. Should be possible with interactions Cheers, Bob ---
**Author:** ![excede](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@excede](https://forum.pinegrow.com/u/excede)\ **Post date:** [June 19, 2021, 11:04pm UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/5 "2021-06-19T23:04:34Z")
Here is another example of the exact functionality I am after. Note, when you rollover the image is zooms in place wherever the pointer is but allows you to navigate the whole image when moving over it. Also it has other images on the left side that replace the “zoomable” image. I can achieve the clicking on the left hand images replacing the image in the larger image rectangle but I don’t know how to achieve the zoom rollover other than it zooming in place (not allowing the user to explore the whole image zoomed in). I guess it’s a mathematical solution because if your pointer is 30% across the rectangle and 10% down then the position of the image will be relative to the position of the pointer. Just like if you go all the way to the top of the rectangle, then the image top is aligned to the top of the rectangle (if that makes sense). I’m not agains adding custom javasctipt and css but thought it might be possible in interactions so I can tweak the perfect user experience without code. See the link I was referring to below… > **[adidas Men's Tiro 21 Jersey & Reviews - Activewear - Men - Macy's](https://www.macys.com/shop/product/adidas-mens-tiro-21-jersey?ID=11316031&CategoryID=3296&swatchColor=Black%2FWhite)** > > Shop Men's Tiro 21 Jersey online at Macys.com. Versatile enough to go from the pitch to any casual occasion, the Tiro 21 jersey from adidas is crafted from recycled materials for a major statement. ---
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [June 20, 2021, 8:28am UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/6 "2021-06-20T08:28:08Z")
I think this hasn’t been solved so I’m going to submit my solution here. For this functionality you just have to think about the process step by step. Explaining the process will be pretty long so I’ve attached the example. BTW I’ve not added image change functionality in this example. If there is anything do let me know. > **[img-zoom-rollover.zip](https://drive.google.com/file/d/1yyADThbk1MUZe2HxNgrHDn1LzAhBfWil/view?usp=sharing)** > > Google Drive file. [https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/418ea3414b5d515005c17548da7508271ecd679e.mp4](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/418ea3414b5d515005c17548da7508271ecd679e.mp4) ---
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [June 20, 2021, 9:30am UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/7 "2021-06-20T09:30:45Z")
**Explaining the process in short This may not explain in detail but if you check it with the project it should be more clear** First add click interaction to activate zoom - Timeline for the image: Zoom the image with transform \> scale = 2 - Timeline for the main DIV block: Add Class = active and Cursor = zoom-out Add another click interaction to deactivate zoom - Timeline for the image: add following transform \> scale = 1 transform \> X% = 0 transform \> Y% = 0 - Timeline for the main DIV block: Remove Class = active and Cursor = zoom-in Now add interaction for rollover X, trigger should be Mousemove \> Animate X position - In the timeline select the image, add 2 transitions one for set and another for tween - For Set: select transform \> X% = 50% - For Tween: select transform \> X% = -50% Similar thing for rollover Y, add interaction and trigger should be Mousemove \> Animate Y position - In the timeline select the image, add 2 transitions one for set and another for tween - For Set: select transform \> Y% = 50% - For Tween: select transform \> Y% = -50% If there is anything, do let me know. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [June 20, 2021, 9:49am UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/8 "2021-06-20T09:49:14Z")
Hi @abirana, THanks for doing this and explaining! One thing to add - this tripped me up. For the zoom-out and two roll-over interactions, make sure to go under the advanced options and select “has class” for the trigger condition and “active” for the trigger condition value. That way those animations only are active if the first zoom-in animation has been run first. Cheers, Bob ---
**Author:** ![excede](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@excede](https://forum.pinegrow.com/u/excede)\ **Post date:** [June 20, 2021, 10:45pm UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/9 "2021-06-20T22:45:01Z")
That is fantastic, thank you so much for doing this - it is very much appreciated, I’m going to try it now. ---
**Author:** ![excede](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@excede](https://forum.pinegrow.com/u/excede)\ **Post date:** [June 20, 2021, 10:45pm UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/10 "2021-06-20T22:45:20Z")
Thanks for the heads up Rob ---
**Author:** ![janieoliver](https://avatars.discourse-cdn.com/v4/letter/j/a4c791/32.png) [@janieoliver](https://forum.pinegrow.com/u/janieoliver)\ **Post date:** [April 8, 2022, 9:18am UTC](https://forum.pinegrow.com/t/how-to-achieve-zoom-rollover-effect/5358/11 "2022-04-08T09:18:56Z")
Thanks to everyone who shared how to zoom in on a clearer photo.