Background effect/coloured shape on hover and select

Ask the Community Customization
1

Hi.

Is there anyway I can code in a hover effect on a product slideshow? The initial one I have created, ‘product images’ is for the main product page, which I would like to show a coloured circle behind the product on hover. I will be creating more static product widgets for product categories which I would like to display the green circle behind when it is selected.

Not sure whether this is possible or not.

Thanks in advance for any help.

1 Like
3

Happy to see you on our forum! Welcome, @user17341 :wave:

I guess it’s possible. Could you please share an example of how it should look?

4

This is the sort of idea I have. On their main page there is a carousel where a green circle appears on hover. If you click through they then have thumbnail product images with the same effect but the green circle also stays when selected.

Hope that all makes sense.

Cheers

1 Like
5

Got it, thanks!

I see that the logos in your widget are quite wide, and you are using colored background. So, I guess it will be hard to add a green circle matching the height of this container:

image
image1457×256 14.5 KB

So, there are several possible solutions:

  • Use horizontal ovals instead of circles

  • Increase Horizontal padding in the Background section on the Style tab of your widget’s settings and use green circles

  • Remove colored background and use green circle


Could you please let me know which option you’d prefer?

6

Hi,

Thank you for looking into this!

It would be for the other widget carousel on my account, ‘product slider product page’. I just created it as a test run to see if it was possible so it does not include everything yet. I am also yet to create the static ones which I am hoping to use on various other product pages. Would this be code that I can copy into other widgets when needed?

I think this one would be fine? I’m happy for the padding to be increased if needed.

Thank you

1 Like
7

I’ve talked to the devs and to achieve this effect you need to use the image with transparent background and .png format.

Once you do this, feel free to use this CSS code on the Style tab of your widget’s settings:

@media(hover:hover) {
  .eapp-logo-showcase-logo-component {
    padding-top: 11px;
  }
  
  .eapp-logo-showcase-logo-inner:after {
    opacity: 0;
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 11px;
    width: 100%;
    height: 100%;
    background-color: #78B54E;
    border-radius: 100%;
    transition: 0.1s;
  }
  
  .eapp-logo-showcase-logo-inner:hover:after {
    opacity: 1;
  }
}
1 Like
8

Excellent work! Thanks a lot to you and your team!

1 Like
9

Sorry, just one last thing I was hoping you could advise on. So if I use the same menu with say 4 ‘logos’ (product images) corresponding to 4 separate product pages, if there a way of making the green circle remain on the selected image?

1 Like
10

Hi there, @user17341 :wave:

Yes, it’s possible, but the widget should be installed on these pages first. Once it’s done, please send me a link to your website, and we’ll be happy to apply this customization :slightly_smiling_face:

11

Excellent, you guys are great. Currently building the website, so when its live I will send over the link. Many thanks!

2 Likes