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

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.

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

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!

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