Product Image Rollover Plugin FAQs
Q: Why doesn't the rollover effect work on product images?
A: Rollover troubleshooting:
.product-image-container {
position: relative;
overflow: hidden;
}
.product-image-rollover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.product-image-container:hover .product-image-rollover {
opacity: 1;
}
Q: How do I make rollover work on mobile touch devices?
A: Touch-friendly implementation:
@media (hover: none) {
/* For touch devices - use tap to toggle */
.product-image-container.touched .product-image-rollover {
opacity: 1;
}
}
@media (hover: hover) {
/* For devices with hover capability */
.product-image-container:hover .product-image-rollover {
opacity: 1;
}
}
// Touch event handling
$('.product-image-container').on('touchstart', function() {
$(this).addClass('touched');
setTimeout(() => {
$(this).removeClass('touched');
}, 2000);
});