Moving the caption overlay from the bottom to the middle

Site URL: https://saffron-butterfly-a26f.squarespace.com

I was wondering if there was a way to move the caption overlay on the home page images from the bottom to the top or middle of the image. Thanks!

Website: https://saffron-butterfly-a26f.squarespace.com
Password: @Barleycorn5

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  /* caption overlay align top */
  
  [data-section-id="60ea0fec025aa46e30dc9295"] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ).layout-caption-overlay .image-caption-wrapper {
  
    bottom : auto;
    top : 0;
    
    }
    
  </style>
  

I restricted the effect to the page section with image blocks in it. If you want the effect page-wide, remove [data-section-id="60ea0fec025aa46e30dc9295"]. If you want the effect site-wide do the above and also put the code in Design > Custom CSS minues the style tag.

Here are some alternates.

<style>

  /* caption overlay align center */
  
  [data-section-id="60ea0fec025aa46e30dc9295"] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ).layout-caption-overlay .image-caption-wrapper {
  
    bottom : auto;
    top : 50%;
    transform : translateY( -50% );
    
    }
    
  </style>

<style>

  /* caption overlay on hover align top */
  
  [data-section-id="60ea0fec025aa46e30dc9295"] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ).layout-caption-overlay-hover .image-caption-wrapper {
  
    bottom : auto;
    top : 0;
    
    }
    
  </style>

<style>

  /* caption overlay on hover align center */
  
  [data-section-id="60ea0fec025aa46e30dc9295"] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ).layout-caption-overlay-hover .image-caption-wrapper {
  
    bottom : auto;
    top : 50%;
    transform : translateY( -50% );
    
    }
    
  </style>

Let us know how it goes.

This was fantastic. Thank you for all your help.

On 7/15/2021 at 4:29 AM, Comfrey said:

This was fantastic. Thank you for all your help.

Hi. Do you need to help with these?

Site URL: https://saffron-butterfly-a26f.squarespace.com/

1. (Tablet/Mobile – Homepage > Footer) This line does not coincide with the bottom of the photo(Like on desktop)

2. (Mobile – Homepage > Header) The same here

3. (Mobile/Tablet – Homepage) There is a scroll bar at bottom of the page

4. (Mobile – Footer) Want to make footer links to 2 column (like on desktop/Tablet)?

5. (Desktop – Product) (Quick view) Image doesn’t show in full size

https://saffron-butterfly-a26f.squarespace.com/beauty-wellness-1

Wow, thank you for noticing these problems (I hadn't noticed most of them). I would love help with all of those things.

On 7/28/2021 at 12:42 AM, Comfrey said:

Wow, thank you for noticing these problems (I hadn't noticed most of them). I would love help with all of those things.

Q1. Add to Design > Custom CSS

/* Footer top border */
@media screen and (max-width:767px) {
footer#footer-sections {
    padding-top: 20px !important;
    margin-top: 0 !important;
}
}