Question

UPDATE: This problem was corrected by updating to the latest fancybox css.

I’m building a portfolio site with thumbnails that enlarge on hover using css transforms/transitions. The problem is, when I am viewing the popup, if I move the mouse the popup image blinks/jumps around the page. Here’s the relevant css for the links:

.thumb a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
display: block;
}
.thumb a:hover {
-webkit-transform:scale(1.125, 1.125);  
-moz-transform:scale(1.125, 1.125);
-o-transform:scale(1.125, 1.125);
-ms-transform:scale(1.125, 1.125);
transform:scale(1.125, 1.125);
z-index: 999;
overflow: visible;
}

If I just remove “display:block” from the .thumb a styles, Fancybox works fine, but then my transforms don’t work at all. Or if I leave “display:block” but remove all of the transition rules from the .thumb a styles, Fancybox works fine, and the thumbnails scale, but without the smooth transition. Is there a way to resolve the conflict, so I can have a stable Fancybox popup as well as smooth thumbnail transitions?

Answer 1

It should not affect fancyBox unless you add “thumb” class to body or html element.

I made a quick test just to be sure and it works fine.