# How to change image behaviour and background color on Team Showcase pop-up

**URL:** <https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360>\
**Category:** Customization\
**Tags:** team-showcase\
**Created:** [December 11, 2025, 4:25pm UTC](https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360 "2025-12-11T16:25:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![OrgBliss](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/orgbliss/32/80115_2.png) [@OrgBliss](https://community.elfsight.com/u/OrgBliss)\
**Post date:** [December 11, 2025, 4:25pm UTC](https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360/1 "2025-12-11T16:25:05Z")

</div>

I need help to customize the image settings on the **Team Showcase** pop-up using CSS. I’m testing out the feasibility for using the Team Showcase to display sponsor logos (because I need to categorize them into groups). It’s working great except for the pop-up image which cuts off due to the default CSS on object-fit: cover; The second issue is that the background color is transparent.

I’d like the popup images to have a white background and have the object-fit to be “contain”. If possible, I’d also like 20px of padding around the logo.

I can make these changes in the browser using the inspect tool but when I past the code into the gadgets custom CSS area it doesn’t work. Here’s the code I’m using…

.jHQOrI {  
object-fit: contain;  
background-colour: #fff;  
padding: 20px;  
}

Here’s a direct link to the working gadget… [https://b61412fe2d58461c89c250c9764277d0.elf.site](https://b61412fe2d58461c89c250c9764277d0.elf.site)

Any help would be much appreciated!

---

<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 11, 2025, 4:50pm UTC](https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360/3 "2025-12-11T16:50:09Z")

</div>

Hi there, @OrgBliss 👋

Sure! I’ve passed your request on to the devs and will get back to you once the solution is ready 🙂

---

<div class="post-metadata">

**Author:** ![OrgBliss](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/orgbliss/32/80115_2.png) [@OrgBliss](https://community.elfsight.com/u/OrgBliss)\
**Post date:** [December 11, 2025, 4:58pm UTC](https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360/4 "2025-12-11T16:58:30Z")

</div>

Awesome, thanks Max!

---

<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 12, 2025, 8:41am UTC](https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360/5 "2025-12-12T08:41:51Z")

</div>

Hi there, @OrgBliss 👋

Thank you for waiting!

We’ve added this code to the Custom CSS field on the Style tab of your widget’s settings:

```auto
.global-styles,
.eapp-team-showcase-popup-item-container img {
  object-fit: contain;
  height: revert;
  transform: translate(-50%, -50%);
  top: 50%;
  box-sizing: border-box;
  padding: 20px;
}

@media(max-width: 480px) {
  .global-styles,
  .eapp-team-showcase-popup-item-container img {
    transform: translateY(-50%);
    top: 50%;
  }
}

.global-styles,
.eapp-team-showcase-popup-item-container .eapp-team-showcase-member-card-photo-photoContainer {
  background: white;
}

```

  

Please check it out and let me know if you like the result 🙂

---

<div class="post-metadata">

**Author:** ![OrgBliss](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/orgbliss/32/80115_2.png) [@OrgBliss](https://community.elfsight.com/u/OrgBliss)\
**Post date:** [December 12, 2025, 4:34pm UTC](https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360/6 "2025-12-12T16:34:16Z")

</div>

You are the best! Works like a charm.

Is it on the roadmap to include filtering/grouping features to the logo showcase? This would be very beneficial for anyone who needs to group and list logos by type (eg Gold, Silver, Bronze sponsors). Also, I think it’s very valuable to include a popup to the logo showcase so that you could show a company bio, website, socials etc.. This could take the Logo Showcase to the next level!

---

<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 12, 2025, 4:36pm UTC](https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360/7 "2025-12-12T16:36:30Z")

</div>

Glad to know you’re good now!

Unfortunately, [this request](https://community.elfsight.com/t/group-logos-by-sponsorship-tier-and-an-option-to-filter-them/50163) isn’t on our roadmap yet. However, if this idea gets more votes, we’ll try to consider it in the future.

As soon as any news comes up, we’ll update you in the Wishlist thread 🙂

---

<div class="post-metadata">

**Author:** ![OrgBliss](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/orgbliss/32/80115_2.png) [@OrgBliss](https://community.elfsight.com/u/OrgBliss)\
**Post date:** [December 12, 2025, 4:46pm UTC](https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360/8 "2025-12-12T16:46:50Z")

</div>

Sounds great. Just curious, how many votes are typically required to really get on the radar? I’ll encourage all my customers to vote for it, but are we taking hundreds of votes required. I’ll do my best to campaign for this because I feel anyone using the Logo showcase could benefit. Have a great day!

---

<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 12, 2025, 4:56pm UTC](https://community.elfsight.com/t/how-to-change-image-behaviour-and-background-color-on-team-showcase-pop-up/142360/9 "2025-12-12T16:56:11Z")

</div>

We don’t have a set number of votes necessary for consideration, but the more votes the request gets, the higher chances for its consideration are 🙂