[Resolved] Applying overlay on hyperlinked images site-wide

[qpaq]

Hi,

I’d like to apply a border and hover effect on images that have an URL site-wide. Is it possible to create a CSS that applies all over the website without adding specific classes to images?

[Ying]

Hi there,

Are the images added using WP image blocks?

Let me know!

[qpaq]

Yes, I guess so. It looks like this in the code editor for an image. Images are within containers.

<!-- wp:generateblocks/container {"uniqueId":"72686c03","isGrid":true,"gridId":"4c9b1d65","width":20,"widthMobile":100,"isDynamic":true,"blockVersion":2} -->
<!-- wp:image {"align":"center","id":499,"sizeSlug":"full","linkDestination":"custom","className":"hoveroverlay"} -->
<figure class="wp-block-image aligncenter size-full hoveroverlay"><a href="https://???.com/???"><img src="https://static.???.com/???.jpg" alt="" class="wp-image-499"/></a></figure>
<!-- /wp:image -->

[Fernando]

Hi Qpaq,

For reference, can you provide the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[qpaq]

Hi,

I’m pasting the URL in the private info area. The images on the tile patterns section have URL’s with .hoveroverlay classes. But actually I want all images with an URL to have a site-wide CSS style.

[Fernando]

Hi Qpaq,

Can you try adding this CSS?:

figure a img {
    border: solid 2px #00ff00;
}

figure a:hover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    opacity: 0.4;
    z-index: 100;
}

figure {
    position: relative;
}

Replace the background-color and the opacity values to your preference.

[qpaq]

Hi Fernando,

I did but no effects are visible. Is it because the images are within containers?

[Fernando]

I see. I modified the code above, can you try that?

[qpaq]

Sorry, no change at all even after purging the cache.

[David]

Hi there,

what is the URL the img must contain ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[qpaq]

Hi David, there is not a single specific URL. I want all images with a link on the site to have an overlay hover effect site wide.

[David]

Don’t know what i was thinking lol

Try this CSS:

.wp-block-image {
    position: relative;
}
.wp-block-image a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    border: 2px solid #f00;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
.wp-block-image:hover a:before {
    opacity: 1;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[qpaq]

Thank you very much, that’s resolved.

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts