How to add a custom shape to my image poster and how to have my poster image full bleed

Site URL: https://indigo-bluebird-lpms.squarespace.com/

Hello, 
I am trying to make my poster images ( which I made into buttons ) to have a full bleed width - so that it doesn't respect the site width maximum I set for the content. 

I also have a particular shape which i'd like to apply to my poster images. I thought originally i could just upload them in the shape I wanted as a .png, however I have added a transformation when we hover on the images, where the image scale gets bigger. This causes a problem as when that happens we see the rectangular image block border ... 

I'm not sure how to add resolve this problem, if i need to use clip path or use border-radius-top-left? I tried both, but can't seem to make it work... 

my password code to enter the site  is :1234567890 

If someone has any insights for any of these issues i'm all ears !! 

Thank you 

Vanille Van Der Cam

code:

/**les bouttons**/
.sqs-block-image .design-layout-poster:hover img{
  transform: scale(1.1);
  transition: .4s ease-in-out;}

.sqs-block-image .design-layout-poster img{
  transform: scale(1);
  transition: .4s ease-in-out;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility:visible;
    opacity: 1;    
}

/**gallery buttons padding**/
#block-yui_3_17_2_1_1599925188392_12878{padding:0}
#block-yui_3_17_2_1_1599925188392_15844{padding:0}
#block-yui_3_17_2_1_1599925188392_53763{padding:0}
#block-yui_3_17_2_1_1599925188392_91729 {padding:0}

@tuanphan

Set the border radius to the div that the images are inside of.

1234567890 

It seems incorrect password

Hello @tuanphan i have removed the password of my website , it should work... Sorry about that. 

.image-block-outer-wrapper.combination-animation-custom.individual-animation-vertical-clip.animation-loaded .image-inset {border-top-left-radius: 20%;
-moz-border-radius-topleft: 40%;
-webkit-border-top-left-radius: 40%;
border-top-right-radius: 40%;
-moz-border-radius-topright: 40%;
-webkit-border-top-right-radius: 40%;
}

@rwp I have followed your advice, however since i am new at this I feel like i am not choosing the right div class... 

I used this and it worked for one poster image on the site ( you have no idea how happy i got) , however I added another poster image and it screwed up everything... I'm back to square one... 
Is there a way to assign the code to all the poster images on the index page ? 

I tried using this but that didn't work either ...

sqs-block-image .design-layout-poster

{ border-top-left-radius: 40%;
-moz-border-radius-topleft: 40%;
-webkit-border-top-left-radius: 40%;
border-top-right-radius: 40%;
-moz-border-radius-topright: 40%;
-webkit-border-top-right-radius: 40%;
}

I beg you help...

ps: my website is now unlocked 

Vanille

You will need to get the block id for each image.

#block-yui_3_17_2_1_1599925188392_12878 .intrinsic .image-inset {
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;
}

Thank you so much @rwp its working and its fantastic! 

Do you have any insights on how to make the poster image to go full bleed by any chance ?

I used this code but again no chance...

#block-yui_3_17_2_1_1599925188392_12878{.sqs-block image-block sqs-block-image sqs-text-ready {overflow:visible;}}