Hover Images

This topic has 7 replies, 2 voices, and was last updated 1 week, 1 day ago by Luke Nielsen.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 23, 2025 at 5:55 pm #632317

accounts-1767
Participant

Hello, i have a request regarding the image hover. As of now, the image hover for the categories carousel on my website, the second section on the site(see screenshot below for reference) makes it so that the image zoom in on hover. i would like the whole image to zoom in along with the “borders” so the image isn’t cut on hover. the log in details are below, or you can explain to me how i can fix it myself. thank you!

Attachments:
You must be logged in to view attached files.

January 27, 2025 at 11:06 am #632933
Luke Nielsen
Keymaster
Hello,

You can make a weaker hover through the code below:
```
.category-grid-item:hover .category-image {
    transform: scale3d(1.01, 1.01, 1);
}
```
Kind Regards
January 27, 2025 at 5:11 pm #633170

accounts-1767
Participant

Hi, Luke, thank you for your help, but I’m not sure you understood me correctly. I’ve attached two screenshots below. the first one is how the image looks normally, and the second one in on hover. what I meant was, when I hover over the image I want the whole thing to zoom, not only the image inside the borders, because that cuts it off.(you can see that the shoulde is cut out for example in the case of the screenshots. thank you for your help, login info are below, or you can tell me how to fix it

Attachments:
You must be logged in to view attached files.

January 28, 2025 at 4:15 pm #633536
Luke Nielsen
Keymaster
Hello,

In this case, try to use the below custom:
```
.categ-img .category-grid-item.cat-design-default .wrapp-category,
.categ-img .category-grid-item.cat-design-default .category-image-wrapp {
    overflow: unset;
}
```
Define it in Theme Settings -> Custom CSS -> Desktop CSS area. Then clear the cache and check how it works.

Kind Regards
January 28, 2025 at 5:46 pm #633592

accounts-1767
Participant

Hello, just pasted the code(even with !important), but the issue still persists. thank you for your help, i’ve attached a screenshot with the css down below.

Attachments:
You must be logged in to view attached files.

January 28, 2025 at 6:17 pm #633602

Luke Nielsen
Keymaster

Hello,

Close this https://prnt.sc/gHCIBrMgVLbv selector to activate all codes below.

Kind Regards

January 28, 2025 at 8:06 pm #633624

accounts-1767
Participant

dumb mistake, my bad… thank you very much for the support

January 29, 2025 at 12:26 pm #633764

Luke Nielsen
Keymaster

Hello,

You are welcome! In case you need any additional help, I’d be more than happy to assist you.

Have a good day!

Kind Regards
Author

Posts