Jump to content

Style the Image Block: Card (Photo in front of card)

Recommended Posts

  • Replies 15
  • Views 2.9k
  • Created
  • Last Reply
6 hours ago, tuanphan said:

You mean this block or?

image.thumb.png.17fa14a438aa3a85d9ade07a19c41f49.png

 

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? 😓

Link to comment

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,

image.thumb.png.2ddfb32f6771961849dce0cb532d2c7b.png

image.thumb.png.b33662109b638f4071529eadff460bfc.png

 

Link to comment
  • 4 months later...
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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!

Screenshot 2020-11-22 at 19.10.30.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 2 weeks later...
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

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.