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,

[Author]

Posts