vanille Posted September 13, 2020 Share Posted September 13, 2020 (edited) 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 Edited September 13, 2020 by vanille Link to comment
rwp Posted September 14, 2020 Share Posted September 14, 2020 Set the border radius to the div that the images are inside of. Link to comment
tuanphan Posted September 14, 2020 Share Posted September 14, 2020 1234567890 It seems incorrect password Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
vanille Posted September 14, 2020 Author Share Posted September 14, 2020 Hello @tuanphan i have removed the password of my website , it should work... Sorry about that. Link to comment
vanille Posted September 14, 2020 Author Share Posted September 14, 2020 (edited) .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 Edited September 14, 2020 by vanille Link to comment
rwp Posted September 14, 2020 Share Posted September 14, 2020 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%; } vanille 1 Link to comment
vanille Posted September 14, 2020 Author Share Posted September 14, 2020 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment