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 !!
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%;
}
Question
vanille 0
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
Link to post
Top Posters For This Question
4
2
1
Popular Days
Sep 14
6
Sep 13
1
Top Posters For This Question
vanille 4 posts
rwp 2 posts
tuanphan 1 post
Popular Days
Sep 14 2020
6 posts
Sep 13 2020
1 post
Popular Posts
rwp
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%; }
Posted Images
6 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment