Jquery Zooming Effect on Unbounce


Hello Unbounce Community, 

I’m trying to add a jquery zooming effect found here http://www.elevateweb.co.uk/image-zoom/examples 

On my landing page, I’ve put a html box with this code inside : 

![](http://doc.directportes.fr/assets/img/petite.png)" rel=“nofollow” target="_blank" title=“Link http//docdirectportesfr/assets/img/grandejpg/”>http://doc.directportes.fr/assets/img/grande.jpg"/>;

And with the Javascript Manager, i’ve added two script : 


 " rel=“nofollow” target="_blank" title=“Link http//docdirectportesfr/assets/js/jqueryelevateZoomminjs/script”>http://doc.directportes.fr/assets/js/jquery.elevateZoom.min.js">;

It works, but the problem is that the ‘LensZoom’ appear behind the image. Is seemt that Unbounce give the priority at the image instead of the jquery. 

Is there a possibility to give priority at the ‘LensZoom’ ? 

To see the actual result, you can see the first door on http://www.directportes.fr/v3 

Thanks guys for your help. 


Hi Romaric, 

Add this CSS and you should be set:

<br />.zoomContainer {<br />z-index: 999<br />}<br />



You’re not a Hero, now you’re a SuperHero ! 

It works perfectly, thank you very much Hristian 


Now I have to re-order my cape and make it say SuperHero :open_mouth: :slight_smile:

Image Credit: Superhero by Simon Child from the Noun Project


Hello Hristian, 

I saw that it was possible to add a Stricky Header on unbounce. 

I implement this feature, and now I have conflict with the Zoom effect. 

I try to reduce the Z index of the Zoom, but nothing (from 999 to 700)

The test link is : http://www.directportes.fr/luxe-1/  

I tryed to google this to have some help, but I see that there are conflict with Z index and floating things.


Thanks for your help, 



There is any chance to use in an Unbounce LP a zoom effect similar to the one used on this site?

Tx a lot!


I finally made it! This is the css you could add in your Stylesheets folder:

#lp-pom-image-x .lp-pom-image-container img { -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; -ms-transition: all 0.9s ease; transition: all 0.9s ease; line-height: 0; width: 100%; height: auto; } #lp-pom-image-x .lp-pom-image-container img:hover { width: 110%!important; height: auto; width: 120%; height: auto; }

x = the number of the image you want to zoom from your Landing Page //