Hover State Exceeds Product Image Size with XTEMOS Products (Grid or Carousel)

This topic has 3 replies, 2 voices, and was last updated 7 years, 8 months ago by Artem Temos.

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

Author

Posts
April 28, 2017 at 11:40 pm #12937

Les
Participant

Hello,

I added XTEMOS Products (Grid or Carousel) to a panel on the homepage and set the image size to 262×350 but the hover state extends past the width at different resolutions. Please see attached screenshots.

Thank you!

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

April 29, 2017 at 9:29 am #12948
Artem Temos
Keymaster
Hi,

Yes, this hover state works for all width of the product block and you need to increase your images size. Or if you want, you can remove this black background with the following code snippet.
```
.basel-hover-button:hover .product-element-top {
    background-color: transparent!important;
}
```
Regards
May 3, 2017 at 12:01 am #13109

Les
Participant

Hello,

I would like to keep the image size the width and height it is because it matches the product image height and width on the shop page and it looks better a bit smaller on the home page then filling the entire product block – the images become too big – almost jarring.

Is there anyway we can keep the product images the same size as they are now and have the hover state retain the black overlay? The code snippet you provided has the effect I’m after but we loose the black overlay. Maybe we can just resize the black overlay to fit the size of the image in the product snippet above?

Thanks so much!

May 3, 2017 at 6:25 am #13111
Artem Temos
Keymaster
Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.
```
.basel-hover-button .product-element-top {
  display: inline-block;
}
```
Regards
Author

Posts