# CSS code to make logos float up on hover

**URL:** <https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872>\
**Category:** General Questions\
**Tags:** logo-showcase\
**Created:** [December 19, 2023, 12:19am UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872 "2023-12-19T00:19:20Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Technology\_Services](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/technology_services/32/16146_2.png) [@Technology\_Services](https://community.elfsight.com/u/Technology_Services)\
**Post date:** [December 19, 2023, 12:19am UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/1 "2023-12-19T00:19:20Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 19, 2023, 10:39am UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/3 "2023-12-19T10:39:28Z")

</div>

Greetings @Technology_Services 👋

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 19, 2023, 3:31pm UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/6 "2023-12-19T15:31:09Z")

</div>

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

```auto
.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 😉

---

<div class="post-metadata">

**Author:** ![Technology\_Services](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/technology_services/32/16146_2.png) [@Technology\_Services](https://community.elfsight.com/u/Technology_Services)\
**Post date:** [December 19, 2023, 3:43pm UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/7 "2023-12-19T15:43:44Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 19, 2023, 3:45pm UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/8 "2023-12-19T15:45:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Technology\_Services](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/technology_services/32/16146_2.png) [@Technology\_Services](https://community.elfsight.com/u/Technology_Services)\
**Post date:** [December 19, 2023, 3:54pm UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/9 "2023-12-19T15:54:04Z")

</div>

Sure thing! Here’s the link:

> **[Departments - Pleasant Valley School District](https://pleasantvalleysdorg.finalsite.com/departments)**
>
> Departments - Pleasant Valley School District

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 19, 2023, 3:57pm UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/10 "2023-12-19T15:57:58Z")

</div>

Thank you!

We’ll check it and get back to you 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 20, 2023, 9:58am UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/11 "2023-12-20T09:58:39Z")

</div>

@Technology_Services Please try to use this code instead:

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![Technology\_Services](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/technology_services/32/16146_2.png) [@Technology\_Services](https://community.elfsight.com/u/Technology_Services)\
**Post date:** [December 20, 2023, 10:03pm UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/12 "2023-12-20T22:03:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 21, 2023, 10:15am UTC](https://community.elfsight.com/t/css-code-to-make-logos-float-up-on-hover/34872/13 "2023-12-21T10:15:40Z")

</div>

Awesome!

Unfortunately, we don’t have a list with CSS classes (only for [Instagram Feed](https://community.elfsight.com/t/customizing-instagram-feed-with-the-help-of-css/28749)).

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](https://community.elfsight.com/c/css-codes/158)