How can I apply a hover effect to product images in updated templates?

Store Design
1

Hello,

I’m trying to add a hover effect to my product images. There are solutions by editing the theme.scss.liquid file. However, our template is apparently updated and doesn’t have that file anymore. I’m trying to apply the same solution in any theme. files and it didn’t work. Would greatly appreciate if you can help us with this new template!

Our ideal solution would look something like this website: https://www.cuoispirit.com/

Our website is https://www.rowabi.com/ or https://wabi-element.myshopify.com/.

Thank you all!

2

Hi @RowabiCo ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.min.css->paste below code at the bottom of the file:
img {
    transition: all 0.3s !important;
}
img:hover {
    transform: scale(1.1) !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
3

Hi @AvadaCommerce , thank you your solution worked perfectly! However, I would like to make the hover effect only on products and catalog list images, is it possible to do so? I have pictures on slideshow also so I want to keep them simple with no hover effect :slightly_smiling_face: Thanks again!!

4

Hi @RowabiCo ,

You can try replace previous code to by below code:

.grid__item  img {
    transition: all 0.3s !important;
}
.grid__item  img:hover {
    transform: scale(1.1) !important;
}

Hope it can help you. ^^

5

Hi, it works perfectly as I wanted! Thank you so much!

Also, could you help me with one more question, my image has a different scale (as you can see in the “Our best sellers”, what function in CSS should I use for these .grid-view-item-image to keep the dimension always equal to each other, or fixed? Thanks a lot!!