List carousel hover

Hi! Is there any way you can have a hover effect on a list carousel photo? I am trying to display a product photo on hover and I'm hoping it is possible to do!!

https://lion-wisteria-j3zl.squarespace.com/ pw- hello

The list section is designed to be navigated by swiping on a touchscreen and hence it's not suited to a hover effect. It would also be a pain to implement and keep updated as you would have to identify each list item by their position (using nth-child) to target an image change to a specific item in the list.

So basically what I'm trying to do is have a carousel with my products and on hover have them change. I really am just looking for something where someone can scroll through using arrows. Would you suggest something else that may work?

I see it's done here aaksonline.com under new collection

On 11/19/2022 at 3:13 AM, vccc said:

I see it's done here aaksonline.com under new collection

I see on this site, image zoom in on hover. You mean that effect?

@vccc try this:

.user-items-list-item-container {

	.user-items-list-carousel__slide {
      pointer-events: initial !important;
    }
    
      li img {
        transition: 1s;
    }
    
      li img:hover {
        *your effect here*
        transition: 1s;
    }
  }

However, it is supposed to apply one effect to all items in the carousel. If you need to apply per specific item you will probably need to use 

li:nth-child(1)