How to add a gradient overlay to each image of entire site

Hi there,

This will be tricky to implement using plain CSS.

You may need JS for this.

Example:

<script>
var images = document.querySelector('img');

for(i=0; i > images.length; i++){
image[i].parentNode.classList.add('img-gradient');
}
</script>

You then go do your styling on this CSS:

.img-gradient::before {
    content: '';
height:100%;
width:100%;
background-color: //your gradientcolor here ;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.img-gradient{ position: relative; }

what is the best way you prefer to add javascript to the generate press theme? Adding directly to theme is not good.
Kindly suggest me.
thanks

Hi there,

you can use a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Make sure to wrap the javascript in script tags ie.

<script>
Your javascript goes here
</script>

And select the wp_footer hook
And set the Display Rules > Locations to where you want the script to fire.

I am sorry, but I was not successful.

not working

Can you show us the exact code you added?

And could you take a screenshot of the hook element which holds the JS so we can see the settings?

Ah I see what's the issue here. It's the script's syntaxing.

It's because I didn't format the code on the reply. My bad.

Try this:

<script>
var images = document.querySelectorAll('img');

for(i=0; i > images.length; i++){
image.parentNode.classList.add('img-gradient');
}
</script>

Still no luck. check my site

I doubt whatever method you apply is going to work correctly.
Adding a :pseudo element for the gradient won't work on an HTML <img> tag. Hence the method Elvin provided to target the parent container for the image. Which could be done with just CSS by targeting each container class:

.featured-image,
.post-image,
.wp-block-image {
    position: relative;
}

.featured-image:before,
.post-image:before,
.wp-block-image:before {
    content: '';
    height: 100%;
    width: 100%;
    background-color: rgba(255, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

However, each image type has its own styling and its container will be different, so as you can see from adding that CSS you would need to adjust each individual image :before styles to fit.

This method works but in some places, it does not work properly. mostly on blog sections and archive sections it has the issue, the image overlays are not proper.

I added the site URL. please check and let me know how to fix

Yep - thats what i stated above :)

For your archive images you have this CSS:

@media (min-width: 769px) {
    .post-image-aligned-left .post-image img {
        margin-top: -20px;
        border-radius: 12px;
        box-shadow: rgba(23, 43, 99, .2) 0 7px 28px !important;
    }
}

/* Mobile query */
@media (max-width: 768px) {
    .post-image-aligned-left .post-image img {
        margin-top: -20px;
        border-radius: 12px;
        box-shadow: rgba(23, 43, 99, .2) 0 7px 28px !important;
    }
}

DELETE that.

And add this:

.post-image-aligned-left .post-image img {
    border-radius: 12px;
    box-shadow: rgba(23, 43, 99, .2) 0 7px 28px !important;
    vertical-align: bottom;
}

.post-image-aligned-left .post-image {
    margin-top: 20px !important;
}

.post-image-aligned-left .post-image:before {
    border-radius: 12px;
}

@media(max-width: 768px) {
    .post-image-aligned-left .post-image img {
        width: 100%;
    }
}