"Scaling" ("breathing") of "Home block Product" adaptable to "Home Block Pages"?

[Winfried Hermann]

Hello there Bill,

Thank you for creating such a great theme like “Elite” – I love it and will for sure buy some more licenses.

Today my customer for whom I bought this license came up with the following:

Can we get the images (e.g. the image with the title “Alex Schneider” – please see website – on the home section (Home Block Pages – I display 3 pages there: the featured images and content excerpts) “breathing” like they do in the “Home block Product” of the theme demo site (where the home page section page shows product images from the shop, e.g. the red shoes)?

As we do not have a shop (and so no WooCommerce Plugin which we definitely do not need) I was searching in the demo for the css code and found:

.home-product-block li:hover img.feature, ul.products li:hover img.wp-post-image {
transform: scale(1.05);
transition: scale 0.2s linear 0s;
}

in line 1385 of the theme’s css file.

I tried to adapt this code to the “Home Block Pages”, but none of my trials worked apropriately.

Therefore I’m sure you’re the ony one who can help me.

Where do I have have to add the code

… {
transform: scale(1.05);
transition: scale 0.2s linear 0s;
}

in style.css (respectively the child theme’s css) to get the images “breathing” when hovering over them?
Do I have to tweak some code anywhere else in addition? Let’s say in functions.php or …?
Or did I simply miss some button in the theme options which I would have to switch?

Thank you very much in advance for your reply and assistance.

Warmest regards
Winfried

[Bill Robbins]

Good Morning Winfried,

Excellent question. It is possible to add the same hover effect to these images too. You can add this to your child theme’s style.css file or in the Custom CSS box in the theme options:

.featuredpage img:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
	
	-webkit-transition: scale .2s linear;
	-moz-transition: scale .2s linear;
	-ms-transition: scale .2s linear;
	-o-transition: scale .2s linear;
	transition: scale .2s linear;
}

You can adjust the effect if you’d like to. You can make it larger on hover by increasing the 1.05 (each one) in the snippet above, or smaller by decreasing those. You can also make the effect’s duration longer or shorter by changing the .2s to a larger or smaller number.

If you run into any trouble, let me know.

Have a great day,
Bill

[Winfried Hermann]

Hello there Bill,
you are a hero!
It works excellently!
Thank you very much.

Warmest regards
Winfried

[Author]

Posts