CSS code to make logos float up on hover

Ask the Community General Questions
1

How do I code all the logos in a logo showcase to float up and have a shadow behind them when the cursor hovers over them?

1 Like
3

Greetings @Technology_Services :wave:

I’ve shared your request with our dev team. I’ll get back to you once I receive a response :slightly_smiling_face:

6

Here is the CSS code you need to add to the Custom CSS field on the Style tab of your widget’s settings:

.eapp-logo-showcase-logo-innerInner:hover {
  transform: translateY(-10px);
  box-shadow: 4px 4px 8px 0px rgba(17, 17, 17, 0.4);
}

.eapp-logo-showcase-logo-innerInner {
  transition: transform ease-in-out 0.2s, box-shadow ease-in-out 0.4s;
}

.eapp-logo-showcase-carousel-inner {
  margin-top: 10px;
}

Check it out and let me know if you like the result :wink:

7

Thanks Max that worked great! The only thing is the top row of logos gets cut off when they move up. What would be the code to move all the logos down 10px?

8

Could you please share a link to the page where your widget is installed? I’ll be happy to check it for you :slightly_smiling_face:

9

Sure thing! Here’s the link:

1 Like
10

Thank you!

We’ll check it and get back to you :slightly_smiling_face:

11

@Technology_Services Please try to use this code instead:

.eapp-logo-showcase-logo-innerInner:hover {
  transform: translateY(-10px);
  box-shadow: 4px 4px 8px 0px rgba(17, 17, 17, 0.4);
}

.eapp-logo-showcase-logo-innerInner {
  transition: transform ease-in-out 0.2s, box-shadow ease-in-out 0.4s;
}

.eapp-logo-showcase-grid-container {
  margin-top: 10px;
}
12

Yep that did the trick! Thanks! Is there knowledge base to see what the CSS classes are for each module?

1 Like
13

Awesome!

Unfortunately, we don’t have a list with CSS classes (only for Instagram Feed).

However, we have a CSS Codes category where you can find the most popular codes for different apps. Feel free to check it out - CSS Codes - Elfsight Community