Opacity Color change

[scuur]

Hello

I’m trying to change the color of my opacity on hover.

http://206.189.231.71/client-services/

Please hover over the second image with a dog in it.

Right now the color comes up as white.

Here is my code

.container {
position: relative;
text-align: center;
color: white;
}

.image {
opacity: 1;
width: auto;
height: auto;
transition: .5s ease;
}
.x-column:hover .transparency {
opacity: .1;
transition: .5s ease;
}

.overlay {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}

.hidden{
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;

}

.x-column:hover .hidden{
visibility: visible;
opacity: 1;
}

I would like the overlay transparency to be green
I have tried

.x-column:hover .transparency {
background: rgba(0,128,0, .1);
transition: .5s ease;
}

[Prasant]

Hello @scuur,

Thanks for asking.

I suggest you to give a class name to image element under Customize > Class ex image-opacity. After that add following CSS under Pro > Theme Options > CSS:

.image-opacity img:hover {
    opacity: .9;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[scuur]

@scuur

background: rgba(0,128,0, .1);

Thank you for everything you posted.

Sorry, I should have clarified more. I have an opacity on the image hover. I wanted to code it so it had a darker overlay. I did it up this morning. Thank you so much for the support and posting those helpful links. Here is the code I used if anyone ever needs it.

.image-opacity {
position: relative;
}

 .image-opacity:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(27, 61, 88, .9);
  opacity: 0;
  transition: all ease 1s;
}

.image-opacity:hover:after {
  opacity: 1;
  cursor: pointer;
}

[Alaa]

You are welcome and thanks for sharing your working code!