Jump to content

How can I make the text inside of a summary block overlay the thumbnail image?

Recommended Posts

Site URL: https://portfolio-test-site.squarespace.com/events

EDIT — So as it turns out, I've manage to solve this myself. Please see second comment for solution.

Hi there, 

I'm about to wrap up this client website, and have run into some final roadblocks. Would be grateful for some help, please.

I'm trying to change the 'Title' and 'Excerpt' position of the text in a summary block so that it overlaps the thumbnail like the below example. 

 

Website:https://portfolio-test-site.squarespace.com/events
Password: Hello123

 

OverlayExample.thumb.png.3ed30ea08c84a79943f1fcef6ed1d870.png


 

Link to comment
  • Replies 1
  • Views 802
  • Created
  • Last Reply

I thought I'd leave the question up just in case someone needed a solution sometime in the future. A solution that worked for me was simply this: 

Change summary title styling

// * Change Title Font * //
.summary-title{
  font-family:"Poppins";
    font-weight: 500;
    font-size: 1.8vw!important;
  	padding-bottom: 6%;
    color:#000;
 }

Change width of each summary item 

//Change width of Thumbnails//
 .sqs-block-summary-v2 .summary-item.positioned {
    width: 33% !important;
    position: static;
}

.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

Overlap image thumbnail

.summary-v2-block.sqs-block-summary-v2 .summary-content {
    position: relative;
    bottom: 25%;
}

Finally, change the summary excerpt to be a button (make sure to add a link to your text in the summary item settings)

.summary-v2-block.sqs-block-summary-v2 .summary-content {
    position: relative;
    bottom: 25%;
}

Additional button styling (colour on hover)

Quote

.summary-excerpt {
  a:hover {
    background-color: hsl(60, 4%, 11%) !important;
  color: #fff;
    transition: .1s;
  }
}

If you wanted to apply this to specific pages you can open with #link-of-your-page { and close using }

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.