Jump to content

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

Recommended Posts

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

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



/**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 {
    opacity: 1;    

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






Screenshot 2020-09-13 at 19.11.53.png

Screenshot 2020-09-13 at 18.53.50.png

Link to comment
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

.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 



Link to comment

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;}}

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.