I am developing a product scrolling feature where products info( product image, Name, price)will be shown side by side horizontally. i need to show the image of the product and also its reflection. under the reflected image i need to show the Prod Name and its price. The problem here is i dont want to show the complete reflected image.

the oputput should be something like this

Image Height-100%

Reflected Image Height-20%

Product name

Product Price

The above pattern will repeat horizontally.

I am able to get the desired output with some problem. The reflected image is shown up with hieght 100% and the sapce between the actual image and product name is very high.

My reflected image should be a rotated image of the actual image and only half part of the actual image should be shown.

Any pointers even is highly appreciated