Custom CSS for gallery block

I am trying to make a change to the design of my site. I had some custom CSS written to create a hover with the image title coming up over the images in my gallery . The new design requires me to change the gallery design from grid to stacked and the CSS doesnt seem to work with Stacked. If I use the grid design, I am unable to get the images to display correctly since the aspect ratio options do not match the images.

My current design is the "work" page on my site and my new design test page is "work-new". I just want to have the same hover effect work on the new layout. 

here is a copy of the CSS added to my site. 

Any help you can provide would be much appreciated!

/*

-----------

TAYLOR MEDIA

CUSTOM GALLERY CODE

-----------

 

*/

 

  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{

    transform: scale(1.0);

    

    /* ----------------------

    change the two brightness values below to update the brightness of the dark image overlay (0-100)

    ---------------------- */

    -webkit-filter: brightness(70%);

    filter: brightness(70%);

  }

  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{

    opacity: 1

  }

   .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-description{

    opacity: 1

  }

  .sqs-block-gallery .sqs-gallery-design-grid .slide img{

    -webkit-transition: all 0.6s ease-in-out !important;

    -moz-transition: all 0.6s ease-in-out !important;

    -o-transition: all 0.6s ease-in-out !important;

    transition: all 0.6s ease-in-out !important;

  }

 

/* ----------------------

    THUMBNAIL TITLE ON COMPUTER

    ---------------------- */

 

@media (min-width: 768px) {

  .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{

    position: absolute;

    opacity: 0;

    

    /* ----------------------

    update the two percentages below if you want to change the position of the title on the image vertically and horizontally (0-100)

    ---------------------- */

    top: 50%;

    left: 50%;

    

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    pointer-events: none;

    -webkit-transition: all 0.3s ease-in-out !important;

    -moz-transition: all 0.3s ease-in-out !important;

    -o-transition: all 0.3s ease-in-out !important;

    transition: all 0.3s ease-in-out !important;

    z-index:99999999999;

    padding: 10px;

    

    /* ----------------------

    below can be updated to change the font of the text on hover. font, size, color, line height, etc

    ---------------------- */

    text-transform: uppercase;

    letter-spacing: 6px;

    font-size: 15px !important;

    font-weight: 300 !important;

    font-family: Degular;

    line-height: 1;

    color: #ffffff!important;

  }

}

 

/* ----------------------

    THUMBNAIL TITLE ON MOBILE

    ---------------------- */

 

@media (max-width: 768px) {

  .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{

    position: absolute;

    opacity: 0;

    

    /* ----------------------

    update the two percentages below if you want to change the position of the title on the image vertically and horizontally (0-100)

    ---------------------- */

    top: 50%;

    left: 50%;

    

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    pointer-events: none;

    -webkit-transition: all 0.3s ease-in-out !important;

    -moz-transition: all 0.3s ease-in-out !important;

    -o-transition: all 0.3s ease-in-out !important;

    transition: all 0.3s ease-in-out !important;

    z-index:99999999999;

    padding: 10px;

    

    /* ----------------------

    below can be updated to change the font of the text on hover. font, size, color, line height, etc

    ---------------------- */

    text-transform: uppercase;

    letter-spacing: 6px;

    font-size: 9px !important;

    font-weight: 300 !important;

    font-family: Degular;

    line-height: 1;

    color: #ffffff!important;

  }

}

 

/* ----------------------

    Tag line display on Mobile Site

    ---------------------- */

 

a.Mobile-bar-branding:after {

    content: "DIRECTOR OF PHOTOGRAPHY";

    display: block;

    margin-top: 10px;

  margin-left: 3px;

    font-size: 13px;

    font-family: Degular;

    color: #00042;

}

 

/* ----------------------

    Gallery max size and padding

    ---------------------- */

 

@media (min-width: 768px) {

.tweak-site-width-option-full-background .tweak-site-width-option-full-background .Intro-content, .tweak-site-width-option-full-background .Main-content, .tweak-site-width-option-full-background .Footer-inner, .tweak-site-width-option-full-background .Index-page-content {

  max-width: 1400px;

  padding-left: 80px;

  padding-right: 80px;

}

}

 

Hi,

Can you share link to page where you use Gallery Block? We can check easier