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

Hover scale effect stopped working


Site URL: https://corn-apricot-zn88.squarespace.com/staff-blog-test

I added a scale on hover effect to my personnel summary block. It worked absolutely fine until I looked at it today. I have not changed any CSS. 

Now the scaled up image bleeds outside of the box. It should not be visible between the images. Is there something I can add. (site PW is BA47)

I tried an override with "overflow: hidden" but it does nothing. 

This is the ENTIRE code for the hover effect and title overlays that is in the CSS. It is used on the personnel page and portfolio page. 

@sbg-6_title-font-color: #e86335;
@sbg-6_title-case: uppercase;
@sbg-6_title-letter-spacing: 0.1em;
@sbg-6_title-font-family: 'arial'!important;
@sbg-6_title-font-size: 20px;
@sbg-6_title-font-weight: normal;
@sbg-6_title-paddinng-vertical: 90%;
@sbg-6_link-font-family: 'arial'!important;
@sbg-6_link-font-size: 18px;
@sbg-6_link-case: varies;
@sbg-6_link-font-weight: normal;
@sbg-6_link-font-color: #000000;
@sbg-6_link-letter-spacing: 0.1em;
@sbg-6_excerpt-padding-vertical: 0;
@sbg-6_excerpt-padding-horizontal: 10%;
@sbg-6_excerpt-font-color: #000 !important;
@sbg-6_excerpt-font-family: 'arial'!important;
@sbg-6_excerpt-font-size: 14px!important;
@sbg-6_excerpt-font-weight: normal;
@sbg-6_excerpt-line-height: 1em;
@sbg-6_excerpt-case: none;
@sbg-6_clickthrough-option: auto;
@sbg-6-metadata-bg: rgb(234, 226, 234);
@sbg-6_metadata-padding-vertical: 10px;
@sbg-6_metadata-padding-horizontal: 30px;
@sbg-6-metadata-font-color: #fff;
@sbg-6-metadata-case: uppercase;
@sbg-6-metadata-letter-spacing: 0.1em;
@sbg-6-metadata-font-weight: bold;
@sbg-6_hover-time-overlay: 1s;
@sbg-6_hover-time-content: 0.7s;
@sbg-6_hover-time-image: 0.5s;
@sbg-6_hover-scale: 1.2; 
@sbg-6_hover-overlay-bg: rgba(255, 255, 255, 0.7);
@sbg-6_mobile-excerpt-padding-vertical: 5%;
@sbg-6_mobile-excerpt-padding-horizontal: 5%;
@sbg-6_mobile-overlay-bg: rgba(234, 226, 234, 0.5);
@sbg-6_mobile-title-font-size: 20px;
@sbg-6_mobile-excerpt-display: block;

/* This displays the Title */

  .sqs-gallery-design-autogrid {
  //Grid layout
  .summary-thumbnail-outer-container a {
    margin: 0 !important;

  //Grid overlay
  .summary-content .summary-title {
    color: @sbg-6_title-font-color;
    font-family: @sbg-6_title-font-family;
    font-size: @sbg-6_title-font-size;
    font-weight: @sbg-6_title-font-weight;
    letter-spacing: @sbg-6_title-letter-spacing;
    margin-bottom: 0;
    text-transform: @sbg-6_title-case;
    word-break: break-word;
  .summary-title::after {
    content: "";
    display: block;
  .summary-content .summary-excerpt p,
  .summary-metadata--primary {
    color: @sbg-6_excerpt-font-color;
    font-family: @sbg-6_excerpt-font-family;
    font-size: @sbg-6_excerpt-font-size;
    font-weight: @sbg-6_excerpt-font-weight;
    line-height: @sbg-6_excerpt-line-height;
    text-transform: @sbg-6_excerpt-case;

  .summary-read-more-link {
    color: @sbg-6_link-font-color;
    font-family: @sbg-6_link-font-family;
    font-weight: @sbg-6_link-font-weight;
    letter-spacing: @sbg-6_link-letter-spacing;
    text-transform: @sbg-6_link-case;
  .sqs-gallery-meta-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: @sbg-6_excerpt-padding-vertical @sbg-6_excerpt-padding-horizontal;
    position: absolute;
    top: 0;
    pointer-events: @sbg-6_clickthrough-option;
    -webkit-transition: background @sbg-6_hover-time-overlay;
    -o-transition: background @sbg-6_hover-time-overlay;
    transition: background @sbg-6_hover-time-overlay;
    width: 100%;
  .summary-metadata--secondary {
    background: @sbg-6-metadata-bg;
    padding: @sbg-6_metadata-padding-vertical @sbg-6_metadata-padding-horizontal;
    position: absolute;
    bottom: 0;
    left: 50%;
    text-align: center;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    z-index: 999;
  .summary-metadata--secondary a {
    color: @sbg-6-metadata-font-color;
    font-family: 'montserrat';
    font-size: 13px;
    font-weight: @sbg-6-metadata-font-weight;
    letter-spacing: @sbg-6-metadata-letter-spacing;
    text-transform: @sbg-6-metadata-case;
  .product-price {
    opacity: 0;
    -webkit-transition: @sbg-6_hover-time-content linear;
    -o-transition: @sbg-6_hover-time-content linear;
    transition: @sbg-6_hover-time-content linear;
  .summary-metadata-item::after {
    display: none;
  .summary-thumbnail {
    -webkit-transition: -webkit-transform @sbg-6_hover-time-image;
    transition: -webkit-transform @sbg-6_hover-time-image;
    -o-transition: transform @sbg-6_hover-time-image;
    transition: transform @sbg-6_hover-time-image;
    transition: transform @sbg-6_hover-time-image,
      -webkit-transform @sbg-6_hover-time-image;

  //Grid hover mode
  .summary-item:hover {
    .product-price {
      opacity: 1;
    .summary-thumbnail {
      -webkit-transform: scale(@sbg-6_hover-scale);
      -ms-transform: scale(@sbg-6_hover-scale);
      transform: scale(@sbg-6_hover-scale);

Share this post

Link to post

3 answers to this question

Recommended Posts

  • 0

@deaton72 building off @tuanphan example you can just remove the body/collection ID for it to apply across all summary items


.summary-item {
    overflow: hidden;

Working demo:

CleanShot 2020-08-05 at 17.16.47.gif

Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan


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