Style picture-elements main image but not the elements within it

Share your Projects! Dashboards & Frontend
1

Hi all,

I have a picture-elements card which I am styling with card-modder, however I’m wondering if there is a way to not have these styles applied to the individual elements within it? e.g. I set the opacity of the main picture to 0.2, I do not want this to be applied to the pictures within the picture-element card.
Here is my code

cards:
  - type: custom:card-modder # BANNER PICTURE CARD MODDER
    style: # STYLE THE PICTURE
      opacity: 0.2
      width: 100%         
    card:
      type: picture-elements # BANNER PICTURE
      image: /local/images/image_elements/living_room_b.png
      elements:
        - type: icon # LEFT ARROW ICON
          icon: mdi:arrow-left
          style:
            top: 15%
            left: 5%
            height: 1.5em
            width: 2em
            padding-left: 10px
            padding-right: 10px
            padding-top: 3px
            padding-bottom: 3px
            border-radius: 15%
            border: 1px solid rgb(50, 51, 53)
            opacity: 2.0
          tap_action:
            action: navigate
            navigation_path: /lovelace/home

        - type: image  # LIVING ROOM BUTTON
          image: /local/images/image_elements/living_room_button.png
          style:
            top: 70%
            left: 15%
            height: 50px
            width: 120px
            border-bottom: inset 2px rgb(78, 66, 244)

As you can see I have tried setting the opacity in the individual elements, but this doesn’t work.
Is there a way I can over-ride the card-modder style for the individual elements?

Many thanks

2

did you ever find a solution to this?

3

I ended up just using Photopea (free online Photoshop) to adjust the opacity of the main image