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

Summary block : Title over thumbnail css


Hello !

I would need some help as I would like to have my blogposts summaries look like the photo enclosed. I'd like the title and image to overlap and the title to be in a sort of " white box" (collage style but centered)Do you maybe have some css code to help me ? I have been looking all over the internet but couldn't see anything helpful ! Here is my website if that can help : slaemag.com

Thanks so much in advance !



Edited by jessayinda
Initial Revision

Share this post

Link to post

2 answers to this question

Recommended Posts

  • 0

I have the same question! I've found something that works, but isn't as perfect.

  1. .summary-title-link {
  2. background: #ffffff;
  3. padding-right: 10px;
  4. padding-left: 10px;
  5. position: relative;
  6. bottom: 40px; }

Putting this in your CSS will at least display the title with a white background and slightly overlay the text (this can be adjusted by changing the "bottom" number). If anyone has a better solution I am dying to hear it!

Edited by mmjg
Initial Revision

Share this post

Link to post
  • 0

.sqs-block-summary-v2 {
    .summary-item {
      position: relative;
      .summary-content {
        position: absolute;
        bottom: 0;
        top: auto;
        padding: 70px 20px 0px;   
.summary-title {
  background: #f4f1ef;
  padding: 5px;


This worked for me!

Edited by thejetjournal

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