How can I modify my sold out badge to appear in the middle with a blurred product photo?

[ExoticSouls]

hello, how can someone give me the code to change my sold out badge to look like this where its In the middle and the product photo is blurred ? thanks

website is www.exoticsouls.world 

[GemPages · Accepted solution]

Hello @ExoticSouls 

It's GemPages support team and glad to support you today.

You can follow these steps:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid theme file
3. Paste below code before </body> :

<style>
      .card__badge.right:has(.badge.color-inverse){
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         grid-row-start: inherit;
         text-align: center;
         vertical-align: middle;
         background: rgb(0,0,0,.5);
      }
      .card__badge.right .badge.color-inverse{
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%,-50%);
      }
</style>

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[ExoticSouls]

thank you, worked great. I have two more questions tho. 

1. how can I change the text to be straight across instead of on top of each other?

2. Can you give me code to change only the sale badge to a green color? 

Thanks for the help!

[HELDERWRLD]

Hello @GemPages 
Can you help me on this too?

Website: https://c04baf-2.myshopify.com/

Code: Diversusoficial

I want it to be like the example bellow: