How to remove background-color bleeding when applying to gallery images hover effect. CSS

Hello, I run into this problem (attached image) when I go to apply background-color to my hover on effect to a gallery images image. Currently i'm using the CSS code below. how do I prevent this bleeding into the area outside of the image, so that I just have the color in the area that turns white once hovered?

.sqs-gallery-design-grid .slide:hover {  
  background-color: #af272f;
  z-index: 9999;
  top: -18px;
  margin-bottom: -18px;
    -webkit-transition: all 300ms ease-out;  
  -moz-transition: all 300ms ease-out;  
  -o-transition: all 300ms ease-out;  
  -ms-transition: all 300ms ease-out;  
  transition: all 300ms ease-out;
 opacity:.6 !important;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
  opacity: 1; 
}
.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img {
opacity: 1;
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor:hover {
opacity: 0.3;
transition: opacity 0.2s ease-in-out;
}
a img.thumb-image:hover {
 opacity: 0.6;
 background: #7a99ac !important
} 

Can you share site url?