This topic has 52 replies, 3 voices, and was last updated 7 years, 10 months ago ago by Eva Kemp
Hey guys. My swapped image feature now doesn’t work correctly since the update…which tells me something slipped through the cracks on CSS modifications.
The swapped image overlays only 50% of the featured image. List view, grid, mobile, desktop…all the same deal.
Ideas? I thought we did all swapped image code mods through the Custom CSS page. Idk
Hello,
The issue with hover images was fixed in the theme update.
So please comment the css code you used and check your site after that.
Regards,
Eva Kemp.
I’ve removed the code in the Custom CSS that had anything to do with the swapped hover image.
It’s still just a wee bit off in grid/list view desktop and mobile. A fine line is visible at the edge of the image and/or the image moves ever so slightly. You’ll see when you view the page.
To save further confusion on which particular things/areas to modify/add, please add the applicable code to fix this issue.
Thanks!
No takers on this yet? Sure would like someone to check out all this Custom CSS code for me to fix the swapped image issue. Many thanks!
Hello,
Sorry for a delay.
I’ve checked hover images and don’t see any problems
http://storage6.static.itmages.com/i/16/0330/h_1459331470_9444444_2b5dc2f3b9.png
http://storage9.static.itmages.com/i/16/0330/h_1459331530_1254144_572726482c.png
What browser are you checking in?
Show us a screenshot of the problem.
Regards,
Eva Kemp.
I can’t really send you a screenshot of movement. This happens right at the moment of hovering over the image. The image will slightly move, have a thin white line show up at the right side of the image, then disappear. I’m using FF.
In Chrome, it’s the same thing….except the white line doesn’t disappear. Grid and List view are fine. Mobile is fine.
On both platforms, the issue is more likely to show in desktop view.
If I could send a video to illustrate this more easily, I would.
Hello,
I’ve added this code in Global Custom CSS:
.product-image-wrapper.hover-effect-swap img{
backface-visibility: hidden;
}
.product-image-wrapper.hover-effect-swap img.show-image{
backface-visibility: hidden !important;
}
Please check swap image now.
Regards,
Eva Kemp.
I see absolutely no change Eva. I’ve checked both on a Mac platform…and a Windows machine. 🙁
And for the record, “Our Offers” and “Related Products” swapped images work perfectly for all resolutions.
Hello,
Please take our apologies for delay.
I’ve added the following css code in Custom CSS for desktop section:
.product-image-wrapper.hover-effect-swap img {
width: 180px;
}
Clear browser cache and check the shop page.
Best regards,
Jack Richardson.
Like magic, it works! Thanks a bunch Jack. One last request. It doesn’t quite work right in List view on mobile in FF. Can you look into that please?
Hello,
I’ve checked your site on mobile view and don’t see the problem with swap effect.
Best regards,
Jack Richardson.
Try using FF and re-sizing your browser window on a desktop to mobile size. I don’t have FF for a true mobile device. I only re-size the browser.
Grid View…FF…re-sized browser to mobile view. Thin white line at left side of image immediately following hover…then disappears.
Hello,
I’ve resized FF browser to mobile view and checked Grid layout of products.
Unfortunately I don’t see white line when hovering images.
Try to check it mobile devices.
Thank you.
Regards,
Eva Kemp.
See attached link. FF re-sized to my mobile resolution…thin white line on hover…Grid View. On the actual mobile device, it appears momentarily and then disappears.
I know something just isn’t right.
Hello,
Sorry for a delay.
I’ve added this code in Custom CSS for mobile section:
img.attachment-shop_catalog.size-shop_catalog.wp-post-image {
width: 176px !important;
}
Clear browser cache and check images now.
Regards,
Eva Kemp.
Did you check this yourself by re-sizing FF browser to mobile res?
Hello,
Yes, I’ve checked it resizing the browser and on mobile.
I don’t see such issue that you described. Sorry.
Regards,
Eva Kemp.
It’s obvious that you didn’t actually…or else you would have seen that in List View on hover, image changes to 370×255. Terrible.
Grid view has not changed. Still a white line at the left side of the image on hover. Happens in Chrome but it’s even worse. Image change size on hover in both Grid View and in List view.
I don’t think we’re getting anywhere with this. I’m about ready to give up.
Hello,
Please take our apologies for delay.
We were able to replicate the issue with image hover effect you described and edited previously provided css code to fix the problem. Clear browser and server cache and check products page now.
Best regards,
Jack Richardson.
You must be logged in to reply to this topic.Log in/Sign up