Shop view mouse over images problem

This topic has 18 replies, 3 voices, and was last updated 7 years, 10 months ago by Artem Temos.

Viewing 19 posts - 1 through 19 (of 19 total)

Author

Posts
December 20, 2016 at 6:49 pm #8140

vanuch
Participant

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.

December 20, 2016 at 7:30 pm #8148

Artem Temos
Keymaster

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

December 21, 2016 at 8:54 am #8155

raul
Participant

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

December 21, 2016 at 10:13 am #8161
Artem Temos
Keymaster
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
December 21, 2016 at 10:59 am #8162

raul
Participant

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?

December 21, 2016 at 2:54 pm #8169

Artem Temos
Keymaster

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

January 6, 2017 at 10:13 am #8556

vanuch
Participant

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.

January 6, 2017 at 10:18 am #8557

vanuch
Participant

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. 🙂

January 6, 2017 at 4:19 pm #8566

Artem Temos
Keymaster

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

Regards

January 11, 2017 at 10:57 am #8743

vanuch
Participant

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.

January 11, 2017 at 11:41 am #8749
Artem Temos
Keymaster
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.
January 11, 2017 at 11:53 am #8751

vanuch
Participant

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.

January 11, 2017 at 4:29 pm #8755

Artem Temos
Keymaster

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

January 11, 2017 at 9:28 pm #8775

vanuch
Participant

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.

January 11, 2017 at 9:36 pm #8776

Artem Temos
Keymaster

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

January 12, 2017 at 7:19 am #8793

vanuch
Participant

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

Attachments:
You must be logged in to view attached files.

January 12, 2017 at 4:44 pm #8809

Artem Temos
Keymaster

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.

January 12, 2017 at 5:37 pm #8823

vanuch
Participant

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!

January 12, 2017 at 6:20 pm #8828

Artem Temos
Keymaster

You are welcome!
Author

Posts