Yes I'm developing using localhost so the code was a bit of, sorry for that. Iv'e updated the codepen and now it shows an image with the effect. This codepen seem to work for me at least and like i said before, half of my gallery works fine but the other side flickers. I know iv'e run in to the problem of flickering animation in chrome before but i can't remember what code it was to fix it, i believe it was some javascript that should be placed on the first line in the main.js file.
UPDATE:
So iv'e tried a few solutions and this one seem to almost fix the problem:
In my css i add:
-webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;
When this is added the zoom effect works on the image but half of the image get invisible when u first hover over them, then they return visible and works as expected, so basically the first hover gives me the problem for some reason.
I also tried:
TweenMax.set($('.tile'), {transformStyle: "preserve-3d", transformPerspective: 600});
And that seemed to fix the flickering problem but for some reason i have to hover on the bottom of some images for the zoom effect to trigger. I used the code from this thread https://greensock.com/forums/topic/10517-3d-transform-issue-in-chrome/
Another update:
So i fixed the problem, before i targeted the .tile class in the figure element and that did not work on all the images, i changed the class to one i'm using on the img element .img-responsive. The code that fixed the flicker problem was this:
TweenMax.set($('.img-responsive'), {transformStyle: "preserve-3d", transformPerspective: 600});
Thanks for the help
