How do display an additional product image in the product template?

Hi, everybody, can you please tell me if I want to implement this functionality?

All products from product['thumb'] are displayed through foreach in the category template. When hovering over the product picture, through hover and position: absolute, z-index, I want to replace the main picture - the first additional picture.
The main image is displayed using in src in img tag.

How to output the additional image in the next tag img, what to implement?

This topic has now been moved to the OpenCart 2.0 Support > General Support section of the forum.

Valder wrote: ↑

Wed May 20, 2020 10:07 pm

Hi, everybody, can you please tell me if I want to implement this functionality?

I don't know, do you want to?

Valder wrote: ↑

Wed May 20, 2020 10:07 pm

All products from product['thumb'] are displayed through foreach in the category template. When hovering over the product picture, through hover and position: absolute, z-index, I want to replace the main picture - the first additional picture.

So you want to make it so that on the category page, when a user hovers over a product, its first additional image is displayed?

Well, you could indeed use the z-index, or the position to do it.

You would need to output both images in a <div> and set that div to overflow:hidden, then position one of the images outside the visible area. On hover you can then change it so the additional image is visible and the main image is outside the visible area.

Really if you aren't able to do this you should pay a developer such as ourselves or post a job in the Commercial Support Forum.