jbryan Posted July 7, 2020 Share Posted July 7, 2020 (edited) Site URL: http://danbeeshin.com How can I style the image block: "card" to have the photo in front of the card? With changing the background color as well? If this is how they're doing this on their site... Is this HTML and CSS? http://danbeeshin.com Using the Pedro template to recreate this. Edited July 7, 2020 by jbryan updated question in description Link to comment
tuanphan Posted July 7, 2020 Share Posted July 7, 2020 You mean this block or? 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
jbryan Posted July 7, 2020 Author Share Posted July 7, 2020 (edited) 6 hours ago, tuanphan said: You mean this block or? No, I was able to replicate that block (not the image behind it). I moved on to practice doing the other blocks and I could not figure out how to get the image in front of the text block and make the text block bigger and change the background of it. I'm in a Squarespace web design course and some of my classmates can't figure it out either! @tuanphan I tried again for another hour trying to figure it out! I think it's an html block brought to the back and then styled by css? 😓 Edited July 7, 2020 by jbryan Link to comment
gallop Posted July 10, 2020 Share Posted July 10, 2020 Hi, I'm looking for the codes to achieve the similar look too (example below). On my site, I use Image Block-Collage. I want to move the text blocks around the images and make the images bigger without shrinking the text blocks, just like in the example. I tried another method, which makes a text block overlap on top of the image block but it looks odd. Do you think it is possible to achieve the look like in the example? @tuanphan The attached (yellow block) is what I currently have on my site. gallopapartments.com pass: hello Thank you. Best, Link to comment
_emilytyson Posted November 14, 2020 Share Posted November 14, 2020 Hi @jbryan did you manage to figure this one out? I'm trying to do a similar effect but can only make it work with the colour box behind an image and not the text like the example shown? Link to comment
tuanphan Posted November 14, 2020 Share Posted November 14, 2020 1 minute ago, emsquarespace said: Hi @jbryan did you manage to figure this one out? I'm trying to do a similar effect but can only make it work with the colour box behind an image and not the text like the example shown? If you share link to page where you use image block. We can check easier 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
_emilytyson Posted November 14, 2020 Share Posted November 14, 2020 Thanks @tuanphan there isn't too much to the site yet, I'm playing around with different styles at the moment. I used the code from this (below) thread but I can't figure out how to make it more like the example at the top with the image overlapping the coloured text box. #page-5d9e40adc1c17f087e491930 { background: ~"linear-gradient(#BBB, #BBB) no-repeat center/1px 100%"; /*https://stackoverflow.com/a/53551089/5338581*/ } .design-layout-card .intrinsic { padding-top: 50px; padding-bottom: 50px; } .design-layout-card.image-position-right .intrinsic { padding-right: 6%; margin-left: -6%; background: linear-gradient(90deg, rgba(0,0,0,0) 40%, #FFC0CB 40%); } .design-layout-card.image-position-left .intrinsic { padding-left: 6%; margin-right: -6%; background: linear-gradient(270deg, rgba(0,0,0,0) 40%, #FFBB22 40%); } .sqs-block-image .design-layout-card .image-card-wrapper { background-color: transparent; } Link to comment
tuanphan Posted November 20, 2020 Share Posted November 20, 2020 On 11/14/2020 at 2:48 PM, emsquarespace said: Thanks @tuanphan there isn't too much to the site yet, I'm playing around with different styles at the moment. I used the code from this (below) thread but I can't figure out how to make it more like the example at the top with the image overlapping the coloured text box. #page-5d9e40adc1c17f087e491930 { background: ~"linear-gradient(#BBB, #BBB) no-repeat center/1px 100%"; /*https://stackoverflow.com/a/53551089/5338581*/ } .design-layout-card .intrinsic { padding-top: 50px; padding-bottom: 50px; } .design-layout-card.image-position-right .intrinsic { padding-right: 6%; margin-left: -6%; background: linear-gradient(90deg, rgba(0,0,0,0) 40%, #FFC0CB 40%); } .design-layout-card.image-position-left .intrinsic { padding-left: 6%; margin-right: -6%; background: linear-gradient(270deg, rgba(0,0,0,0) 40%, #FFBB22 40%); } .sqs-block-image .design-layout-card .image-card-wrapper { background-color: transparent; } Hi. Do you still need help on this? 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
_emilytyson Posted November 22, 2020 Share Posted November 22, 2020 Thank you, yes please. I would like to recreate the first example and also make sure it's stacked and works for mobile. Attached again for reference. Thanks! Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 On 11/23/2020 at 2:12 AM, emsquarespace said: Thank you, yes please. I would like to recreate the first example and also make sure it's stacked and works for mobile. Attached again for reference. Thanks! Sorry, had a sick. Have you solved it yet? 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
_emilytyson Posted December 12, 2020 Share Posted December 12, 2020 On 12/3/2020 at 8:16 AM, tuanphan said: Sorry, had a sick. Have you solved it yet? All good now, thank you! Link to comment
Asiya Posted December 20, 2020 Share Posted December 20, 2020 On 12/12/2020 at 4:57 PM, emsquarespace said: All good now, thank you! Hi, can you share the code? how did you solved this? Thanks in advance Link to comment
tuanphan Posted December 22, 2020 Share Posted December 22, 2020 On 12/20/2020 at 2:17 PM, Asiya said: Hi, can you share the code? how did you solved this? Thanks in advance If you share site url, we can take a look. 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
Asiya Posted December 22, 2020 Share Posted December 22, 2020 5 hours ago, tuanphan said: If you share site url, we can take a look. I have sorted out this. Thank you so much:) Link to comment
Asiya Posted December 30, 2020 Share Posted December 30, 2020 On 12/22/2020 at 12:23 PM, tuanphan said: If you share site url, we can take a look. here it is: https://www.livewithplum.com/about I need the image to be on front of card. Link to comment
tuanphan Posted January 5, 2021 Share Posted January 5, 2021 On 12/30/2020 at 9:36 PM, Asiya said: here it is: https://www.livewithplum.com/about I need the image to be on front of card. Add to Custom CSS div#block-yui_3_17_2_1_1609178375474_4516 .intrinsic { overflow: visible; z-index: 999 !important; } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment