Transparent background color to image element on hover?

Support
#1

I have an image link where I’d like to add the following background-color effect on hover:

background-color: rgba(0, 191, 255, 0.7);

Been searching forum and trying on my own and out of ideas. Any help?

#2

Hello There,

Thanks for writing in! If you are using Cornerstone, in your image element settings, please insert a custom ID or custom class like my-id or my-element (http://prntscr.com/gfaesy) and then insert the following custom css in the settings tab, Settings > Custom CSS

Effect #1:

#my-id,
.my-element-class {
   background-color: rgba(0, 191, 255, 0.7);
}

#my-id:hover img,
.my-element-class:hover img{
  opacity: 0.75;
}

Effect #2:

#my-id:after,
.my-element:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: background 0.5s ease;
   background-color: rgba(0, 191, 255, 0.7);
}

#my-id:hover:after,
.my-element:hover:after {
    opacity: 1;
}

Please let us know which one works out for you.

1 Like
#3

Thanks, Effect #2 worked best!

#4

Glad to hear that. :slight_smile: