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


 

Edited by otohmatthew
Provided Solution, trimmed some words
Link to comment

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 }

Edited by otohmatthew
Link to comment

Create an account or sign in to comment

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

×
×
  • 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.