Shop view mouse over images problem

Hello,

We have some product images with transparent background. This is great for use with the dark theme option. But mouse over function in shop view simply loads another photo on top of the default one which means both are visible at the same time. This is not okay. Default image should be replace (meaning turn into not visible) when another image is loaded in mouse over.

Please see attached images that illustrate the issue.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you for your question.

Could you please provide a link where we can see this issue live and try to find a solution?

Kind Regards
XTemos Studio

I also have this issue. Link to shop on private content.

Hi,

Try to put the following code snippet to the Custom CSS in Theme Settings to fix this issue

.product-element-top > a > img {
	transition:0.3s all ease-in-out;
	-webkit-transition:0.3s all ease-in-out;
	-moz-transition:0.3s all ease-in-out;
}

.product-element-top:hover > a > img {
	opacity:0;
}

Regards

It worked, but the image is too small and doesn’t take up the whole space. It’s aligned to the top. How can we make it the same size of the other image?

Sorry, but you can’t do images with different proportions have the same size using CSS. You just need to upload images in the same proportions to make them nice on your website.

Regards

This custom CSS solves the issue quite nicely. Thanks!

PS. Idea for the future: perhaps add this as an option to the theme settings with more than one behaviour on mouse over and also support for handling transparent images. Maybe instead of showing the second gallery image there would be an option to zoom in (maybe even a custom specified %) instead and perhaps some other neat effects.

And I found an error… It works nicely IF there are at least two images assigned (main product image + at least one in the gallery). If the product has a single image, then on mouse over no image is displayed at all (on mouse over the single assigned image will disappear). I find it better then the previous issue with transparency but still not 100% there. 🙂

Could you please send us a link where we can see the product without images in gallery so we can help you?

Regards

Sure. I’ll send a link of a demo site we are developing.
LINK.

I know this install may not have an up-to-date version of the theme currently but I tested this out with an offline update install and the problem still remains.

Hello,

Try to replace previous code with this one

.product-element-top > a > img {
	transition:0.3s all ease-in-out;
	-webkit-transition:0.3s all ease-in-out;
	-moz-transition:0.3s all ease-in-out;
}

.product-element-top.with-hover:hover > a > img {
	opacity:0;
}

and also add this snippet to the Custom JS section

jQuery(document).ready(function() {
jQuery('.product-element-top').has('.hover-img').addClass('with-hover');
} );

Write us about the results.

This fixes the issue with the single image. If hovered, it does not disappear anymore.
But now the original problem is back where transparent images load on top of the first image and both are showing at the same time. So back to square one.

Please note that I am not testing this with the live version of the site I linked earlier.

Ok, could you please provide a link where this code is added so we could check again?

Oh, right, sorry. I will link a demo site where I am using the same theme to develop a new site until we get it ready, purchase a new license and copy to another domain.
Under category “Radio” you can find one product with only one image as well.

But the code is not added there also. Please, check it.

I don’t understand because the code IS added there. See attached images.

Attachments:

You must be logged in to view attached files.

As you can see from the screenshot code is not the same as we posted on forum. Please, check this and use the correct one.

Seems that you were correct. Sorry, my bad. Though I’ve no idea how the older code got there as I copied both from the same place… Seems to work now like it should. Thanks!

You are welcome!

[Author]

Posts