Image shifting/jumping after CSS transition effect with scale transform in Firefox

Question

I have a problem in latest Firefox browser version 34 (system: Windows 7, screen width: 1600px). I made effect with zooming images (in some container) after hov

Answer 1

On the link that you provided, http://demo.qodeinteractive.com/bridge/ , if you actually go here: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/ , you can see that, once looking at dev tools, that they apply a margin of "1px" on left/right side

.projects_holder.hover_text.no_space article .image img {
   margin: 0 1px;
}

If you disable that style, you'll see the image move as you're describing when hovering on the image.

Therefore, your CSS for the image should be:

figure img {
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   display: block;  /* (or inline-block) */
   margin: 0 1px;
}