Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
jbryan

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

Question

Posted (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.

 

SS1.jpg

SS2.jpg

SS3.jpg

Edited by jbryan
updated question in description

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0
Posted (edited)
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? 😓

Edited by jbryan

Share this post


Link to post
  • 0

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

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...