Error with drop shadow effect on hover for gallery images | Brine 7.0

Site URL: https://www.americanpacificgroup.com/experience

Hi there! 

I recently started working with a new client who had their site built by another web designer using the Brine template in 7.0.

On the site's experience page, my client would like a drop shadow to appear when the image in the gallery block is hovered over. And usually, the CSS that the past designer used seems to work perfectly fine (see first screenshot). However, I've noticed that when I'm using Chrome, these black lines appear around the images (see second screenshot). Any idea why this may be happening and how I can fix it? 

https://www.americanpacificgroup.com/experience

Thanks in advance!

10 hours ago, NMDesigns said:

Site URL: https://www.americanpacificgroup.com/experience

Hi there! 

I recently started working with a new client who had their site built by another web designer using the Brine template in 7.0.

On the site's experience page, my client would like a drop shadow to appear when the image in the gallery block is hovered over. And usually, the CSS that the past designer used seems to work perfectly fine (see first screenshot). However, I've noticed that when I'm using Chrome, these black lines appear around the images (see second screenshot). Any idea why this may be happening and how I can fix it? 

https://www.americanpacificgroup.com/experience

Thanks in advance!

try

.sqs-gallery-design-grid .margin-wrapper {
    transition: box-shadow .5s,transform .5s;
    transition-property: box-shadow, transform;
    transition-duration: 0.5s, 0.5s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
    background: transparent;
    color: #fff;
}

On 3/13/2021 at 5:16 AM, bangank36 said:

try

.sqs-gallery-design-grid .margin-wrapper {
    transition: box-shadow .5s,transform .5s;
    transition-property: box-shadow, transform;
    transition-duration: 0.5s, 0.5s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
    background: transparent;
    color: #fff;
}

This worked perfectly! Thank you so much!

@NMDesigns On tablet, footer doesnt look good. You can use this CSS to increase right column width

/* fix email break footer tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1552193792397_143453 {
    padding-left: 0;
}
}