Docs

[Itwebdevelopment]

Hi, I’d like my images on my archives page get slightly larger when they’re hovered over:

https://gyazo.com/908b61c4ffc71d448a1d9fa8a6f72e44

Here’s a link to the site:

https://www.dzdrones.com/shop/

Hope you can help.

Thanks!

[Rue Nel]

Hello There,

Thanks for writing in! To resolve your issue and scale the images when hovered, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.woocommerce li.product .entry-featured a img {
    transform: scale(1);
    transition: all 0.5s ease;
}
.woocommerce li.product .entry-featured a:hover img{
    transform: scale(1.3);
}

We would loved to know if this has work for you. Thank you.

[Itwebdevelopment]

Hi this worked to magnify the images and I like it but I wanted the actual box to get large that the images are in as well.

Is that possible?

[Thai]

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Itwebdevelopment]

I would like to make the images slightly larger when they are hovered over.

Like this:

https://gyazo.com/514945001acf6802cb6e3732f207785b

Please help

[Rad]

Hi there,

Please try this

.woocommerce li.product {
    transform: scale(1);
    transition: all 0.5s ease;
}
.woocommerce li.product:hover {
transform: scale(1.3);
}

Cheers!

[Author]

Posts