Jump to content

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

Recommended Posts

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


Link to comment
  • Replies 1
  • Views 959
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.