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

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

Question

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
} 





hover-color-issue.png.6968459e3bc312a0046ce62f292e44b0.png

Edited by Afinn333
Initial Revision

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

Can you share site url?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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