Home Forums Support Overlay

  • This topic has 5 replies, 2 voices, and was last updated 1 month ago by Elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2051488
    Andrew

    Is there a setting or effect in that i can use to overlay a container on hover with a color? Just checking before implementing some CSS. Please scroll down just a little and I was wondering if I could have a color overlay the woven cord strapping box on hover

    #2051546
    Elvin
    Staff
    Customer Support

    Hi Andrew,

    Will it be only for the image on the box or for the entire box, effectively overlaying the border as well?

    Let us know. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2051551
    Andrew

    I built that after i sent the message, I would say just the image. Looking at the top two rows of products, is what I done ti them achievable with just GB or would it still require CSS, I don’t mind adding CSS, but if I didn’t have to would be great lol. Trying ti expand my knowledge on your products capabilities.

    #2051565
    Elvin
    Staff
    Customer Support

    Try adding an additional CSS class to the GB container of the image boxes.

    And then add this CSS:

    .the-class-you-added .wp-block-image:hover > *:after {
        content: "";
        position: absolute; 
        top:0; 
        left:0;
        width: 100%;
        height: 100%;
        background-color: red;
        opacity: 0.5;
    }
    
    .the-class-you-added .wp-block-image:hover > * {
        position: relative;
    }

    Change the-class-you-added to the class you’ve added on the container block’s additional CSS class(es).

    You then remove the caption and place it on its own Headline block. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2051570
    Andrew

    Awesome thank you!

    #2051571
    Elvin
    Staff
    Customer Support

    No problem. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

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