Catalog image variations overlap in catalog

[Adrenaline22]

Title says it all 🙂

http://91.223.182.33/~ionexionizerscom/shop/

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[Adrenaline22]

pic attached. cache cleared..

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

On my dev I cannot replicate this, are you sure you do not have a few px difference on your second image vs the first?

You can test this by slightly tweaking the position of the second image top position offset:

.products .product figure.product-transition-fade .img-wrap.second-image {
    top: 3px;
}

[Rui Guerreiro – SUPPORT]

The images have the same size, and seem to be in the same position. So it seems to be related to the images.
Can you put one image over the other in the photoshop to see if it happens the same?

-Rui

[Adrenaline22]

definetly not. I didn’t alter it in any kind of way via CSS.

The only thing that comes to mind is that the images are PNG with transparent background.

[Adrenaline22]

Rui,

Almost all products you can see in the catalogue are variable. There are black and white versions, yet only in this specific product the variation images overlap somehow..

[David Martin – Support]

If the images are transparent and it’s only this product that causes the error there is likely a vertical positioning difference within image – do you have the PSD for both of these?

[Rui Guerreiro – SUPPORT]

exactly that’s one more reason that the problem can be in the images.

I don’t have Photoshop to place the images in different layers to check if they are exactly in the same position and with the same dimensions(I mean the object not the entire image with the transparent area)

-Rui

[Adrenaline22]

I don’t get you, but I’ve attached the pngs anyway 🙂

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

If you compare the two images, you will see the product image for the black item is slightly higher.

You’ll want to adjust those within your image PSD file.

[Adrenaline22]

I understand that, but what the heck it has to do with alignment. What If I have two different photos with transparent photos altogether? Would the product variations look like a deck of cards stuck on one top of the other?

The only sensible solution is not to use PNGs but JPEGs instead, because the template is overlaping images…

[David Martin – Support]

As you are using transparent images, yes it would look stacked.

People often add a color background to their PNG images to avoid this.

Thanks