Background overlay transition

Resolved artemis21
(@artemis21)

2 years, 7 months ago

Hello,

How can I make the overlay background (black) transitioning when fading out with CSS? at the moment it just appears and disappear but I can’t find the element or rule to edit.

I tried with

.xoo-wsc-opac {
transition: all .5s linear;
}

But it only transition when appearing

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author xootix
(@xootix)

2 years, 7 months ago
Hello,

This will work
```
.xoo-wsc-opac {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    z-index: -1;
    opacity: 0;
    transition: all 0.5s;
    
}
```
- This reply was modified 2 years, 7 months ago by xootix.
- This reply was modified 2 years, 7 months ago by xootix.
- This reply was modified 2 years, 7 months ago by xootix.
Thread Starter artemis21
(@artemis21)

2 years, 7 months ago

Hello,

I tried but it works only on fade-in

see here (cart widget on top right): https://new.sptm.it/product/burton-m-custom-flying-v-snowboard/

Might be because I changed the background color?

Plugin Author xootix
(@xootix)

2 years, 7 months ago

Hello,

I’ve updated the plugin and the overlay transition comes by default.
There is no need to add extra code.

Thread Starter artemis21
(@artemis21)

2 years, 7 months ago

With the last update the overlay has a questionable “slide-up” transition. How to make it just for opacity?

Thank you

Plugin Author xootix
(@xootix)

2 years, 7 months ago

The update targeted only for opacity. There is no slide up intended.
Please try removing your custom code and if still doesn’t work like here
https://demo.xootix.com/side-cart-for-woocommerce/
remove the maintenance mode here so I can check
https://new.sptm.it/product/burton-m-custom-flying-v-snowboard/
Thread Starter artemis21
(@artemis21)

2 years, 7 months ago
Oh I see, I still had CSS for the previous version. Now I just added:

.xoo-wsc-opac {
background-color: rgba(192,192,192,.6);
}

By the way is there a way to change the cart icon in the drawer? i selected the cart icon for the menu but it still shows the bag in the drawer.

Thanks
- This reply was modified 2 years, 7 months ago by artemis21.
- This reply was modified 2 years, 7 months ago by artemis21.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Background overlay transition’ is closed to new replies.