Adding A Lightbox Border To product Images When Displayed In Grid View

Running the current latest version of Zencart V1.5.8.

Have enabled the product listing > columns per row, value to 3, so that a grid view of 3 rows of products is shown, when browsing products in the grid view.

Does anyone know how we can create a border, ideally a lightbox, around the product images?

When you scroll over the products with the mouse, it highlights them.

It would be good to have some kind of border / lightbox effect on the images, to show that they are separate.

At the moment, it looks a bit clustered, and the border / lightbox effect would make things stand out, and look better.

Kind Regards,

Andy

Code:

---

[COLOR=var(--sys-color-state-disabled)].centerBoxContents:hover, .categoryListBoxContents:hover, [COLOR=var(--sys-color-on-surface)].centerBoxContentsListing:hover[/COLOR][/COLOR][COLOR=var(--sys-color-on-surface)] {[/COLOR]

•     [COLOR=var(--webkit-css-property-color,var(--sys-color-token-property-special))]border-radius

• : 5px
  ;
•     [COLOR=var(--webkit-css-property-color,var(--sys-color-token-property-special))]box-shadow[/COLOR]: 21px 21px 41px #01007e, -21px -21px 41px #b9b9ff;

[/COLOR]

---

Adjust as needed and make sure your colors are compliant.