# Elements 3 and Pick a Card Component Issues

**URL:** <https://forums.realmacsoftware.com/t/elements-3-and-pick-a-card-component-issues/56990>\
**Category:** Elements\
**Created:** [July 13, 2026, 8:39pm UTC](https://forums.realmacsoftware.com/t/elements-3-and-pick-a-card-component-issues/56990 "2026-07-13T20:39:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JudsonDigital](https://avatars.discourse-cdn.com/v4/letter/j/fbc32d/32.png) [@JudsonDigital](https://forums.realmacsoftware.com/u/JudsonDigital)\
**Post date:** [July 13, 2026, 8:39pm UTC](https://forums.realmacsoftware.com/t/elements-3-and-pick-a-card-component-issues/56990/1 "2026-07-13T20:39:03Z")

</div>

@Dan Please see short video for issue: [Click Here](https://screen.studio/share/xPqpkrK2).

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 14, 2026, 9:48am UTC](https://forums.realmacsoftware.com/t/elements-3-and-pick-a-card-component-issues/56990/2 "2026-07-14T09:48:58Z")

</div>

Thanks for the video, that’s very helpful to see the bug in action. Have you tried reselecting or changing the background hover colour?

Hopefully we can work with @1LittleDesigner to get this resolved!

---

<div class="post-metadata">

**Author:** ![JudsonDigital](https://avatars.discourse-cdn.com/v4/letter/j/fbc32d/32.png) [@JudsonDigital](https://forums.realmacsoftware.com/u/JudsonDigital)\
**Post date:** [July 14, 2026, 12:29pm UTC](https://forums.realmacsoftware.com/t/elements-3-and-pick-a-card-component-issues/56990/3 "2026-07-14T12:29:47Z")

</div>

It looks to me that under the interactive state setting that the Overlay Opacity setting is not being honored possibly.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 14, 2026, 12:31pm UTC](https://forums.realmacsoftware.com/t/elements-3-and-pick-a-card-component-issues/56990/4 "2026-07-14T12:31:24Z")

</div>

Yeah, we really need @1LittleDesigner to take a look at this as I don’t know what code his component is using 🤔

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 14, 2026, 12:58pm UTC](https://forums.realmacsoftware.com/t/elements-3-and-pick-a-card-component-issues/56990/5 "2026-07-14T12:58:29Z")

</div>

> [@JudsonDigital](#):
>
> under the interactive state setting that the Overlay Opacity setting is not being honored

This sounds like an issue with Tailwind 4 removing the deprecated opacity utilities like `bg-opacity-*`.

@1LittleDesigner If this is the case, you need to switch to using opacity modifiers as detailed here [Upgrade guide - Getting started - Tailwind CSS](https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities)

We had to update our components for this, and the way we did it was to set the opacity as a CSS property and then use that as the opacity modifier in the Tailwind class, here’s the code we use:

```json
    {
        visible: "bgType == 'color'",
        title: "Color",
        id: "bgColor",
        format: "bg-{{value}}/(--bgColorOpacity)",
        themeColor: {
            default: {
                name: "surface",
                brightness: 900,
            },
        },
    },
    {
        visible: "bgType == 'color'",
        title: "Opacity",
        id: "bgColorOpacity",
        format: "[--bgColorOpacity:{{value}}%]",
        responsive: false,
        slider: {
            default: 100,
            use: "Slider",
            units: "%",
        },
    }

```

The key bit here are the `format` keys. Let me know if you have any questions on this, we’re happy to help 😊

---

<div class="post-metadata">

**Author:** ![Jon1LD](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jon1ld/32/8890_2.png) [@Jon1LD](https://forums.realmacsoftware.com/u/Jon1LD)\
**Post date:** [July 14, 2026, 2:46pm UTC](https://forums.realmacsoftware.com/t/elements-3-and-pick-a-card-component-issues/56990/6 "2026-07-14T14:46:23Z")

</div>

> [@JudsonDigital](#):
>
> s to me that under the interactive state setting that the Overlay Opacity setting is not being honored possibly.

Thanks a bunch for pointing us right to the culprit. An update to fix this will be out very soon.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 14, 2026, 6:40pm UTC](https://forums.realmacsoftware.com/t/elements-3-and-pick-a-card-component-issues/56990/7 "2026-07-14T18:40:14Z")

</div>

@Jon1LD I updated to the latest version of Pick a Card, but while some of it is better, there are still a lot of problems. The main one being that you cannot edit the cards, as they are not displayed in the editor. The other problem is that the only way to interact with them is by using the slider, which is now always visible and does not appear to be respecting the setting that controls it. You can no longer hover over a card to bring it to the front.