Adding color overlay on basic Images

[Primetime]

Hi! Thanks in advance to anybody willing to help.
I'm currently working on my own portfolio using this theme is there a way to add a color overlay to basic images (not project thumbnail)?
I'm a bit of a css noob so here it goes, I've been able to add a caption inside the image and would love to add an overlay too.
I've tried using syntax for the hover but atm nothing works.

.img img{
transition: all 300ms ease;

}

.img:hover img{
filter: brightness(0.5);
}

.img .caption{
    opacity: 0;
    transition: opacity 300ms ease;
}

.img:hover .caption{
    opacity: 1;
}

.img .caption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

[Richard]

Dear @Primetime

Cool!
Could you please post a link to the website in question just to work better and see what happening with the code :)

best
Richard

[Primetime]

Sure: https://www.creativetothebone.com/category/about *effect added to first image

I'm still building and blocking stuff out, anyway as now the hover is guided by the filter command, I'd love to scrap that and add a color overlay on hover. I've tried different methods, but somehow images have either a class/property that can't be called in (or i'm just too noob to find it) or overwritten in .css.
Usually I'll put a div on top of the image with the overlay and play with absolute and relative properties on it as I've seen doing on many tutorials, but even if I declare a div in the custom html I don't know what element to use in the gridder to attach the class too.
Is there a better solution to this?
Any help?

Thanks @Richard-K

[Richard]

Dear @Primetime

Sorry that i may still need some understanding -
Just first when you refer to having difficulty knowing which element to target with CSS - we can use the Developer tools within Chrome, Opera, Safari to inspect the HTML Structure of the webpage along with all the attributes:

https://laytheme.com/documentation.html#custom-css-styling

https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

Here i have right-clicked and chosen "inspect" sorry if i am assuming anything, i just had to start from there :) :

With an Image inserted - Lay Theme already has this class "ph" built in which can be used for Overlay - This is what gets activated in Customizer when choosing what hover does with Project Thumbnails, you could address this 'ph' if you wished to use as a color overlay block for your images

Let me know your thoughts and best wishes!
Richard

[RenataMGr]

Hello, I have the same issue. I want to have this effect on all my images in my gridder. I have tried multiple ways of giving my images their own class and id to achieve the effect and customizing their html css so far without success. How would you code this in the custom css? Thank you for the great theme!

[RenataMGr]

An example of the effect i need on images https://designdesign.com.au/

[arminunruh]

this effect only works on project thumbnails
they are added in the gridder with +project thumbnail
or +more -> +thumbnail grid

in customize -> project thumbnails

you can find settings to make it work like here https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

[RenataMGr]

Hi yes i tried with w3schools tutorial without success. the overlay effect affected the entire container of the image and not just the image itself. Maybe im targeting the images class incorrectly?

[arminunruh]

do you have a link?

[arminunruh]

so i mean, with images, you can't really have a text on top of them when you hover over an image :⁄ so im not sure if what u want is even possible :O