Homepage Categories – Stop Zoom
-
Hey,
On the homepage, I have 5 categories displayed just below the menu as blocks, and they are called “Product Categories” on the theme.
However, whenever I hover my mouse over the homepage categories, it automatically zooms in the image and pushes the text upwards, covering the images.
How can I prevent the text from moving upwards and reduce the amount the image zooms in when a user hovers over a category?
Hi josephdickinsonuk,
Thanks for reaching to us and appreciate your patience.
Please add the following Custom CSS code in Theme Settings > Custom CSS > Global Custom CSS
.products .category-grid-item:hover .category-image {
transform: none;
}
@media (min-width: 769px){
.products .cat-design-default:hover .hover-mask {
transform: translateY(100%) translateZ(0);
}
.products .cat-design-default:hover .more-products {
opacity: 0;
transform: translateY(15px) translateZ(0);
}
}
Regards,
Cheers for this.
I appreciate that this has worked, but what would be the CSS to prevent the text from moving upwards but provide a slightly increase in the brightness of the image when a mouse it hovering over it to indicate to users that it’s an active clickable element? If that’s not possible, a very minor zoom effect would be acceptable.
Hi josephdickinsonuk,
Please remove previous Custom Code and try below one:
.products .category-grid-item:hover .category-image {
transform: scale3d(1.05, 1.05, 1);
}
@media (min-width: 769px){
.products .cat-design-default:hover .hover-mask {
transform: translateY(100%) translateZ(0);
}
.products .cat-design-default:hover .more-products {
opacity: 0;
transform: translateY(15px) translateZ(0);
}
}
Regards,
.
