[Resolved] Applying overlay on hyperlinked images site-wide

Home Forums Support [Resolved] Applying overlay on hyperlinked images site-wide

Home Forums Support Applying overlay on hyperlinked images site-wide

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2380445
    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?

    #2380513
    Ying
    Staff
    Customer Support

    Hi there,

    Are the images added using WP image blocks?

    Let me know!

    #2380520
    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 -->
    #2380582
    Fernando
    Customer Support

    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

    #2380775
    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.

    #2380813
    Fernando
    Customer Support

    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.

    #2380831
    qpaq

    Hi Fernando,

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

    #2380863
    Fernando
    Customer Support

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

    #2380867
    qpaq

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

    #2381385
    David
    Staff
    Customer Support

    Hi there,

    what is the URL the img must contain ?

    #2381397
    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.

    #2381429
    David
    Staff
    Customer Support

    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;
    }
    #2387015
    qpaq

    Thank you very much, that’s resolved.

    #2387362
    David
    Staff
    Customer Support

    Glad to hear that!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.