[Resolved] Dynamic data – post feature image as background linkable?

Home Forums Support [Resolved] Dynamic data – post feature image as background linkable?

Home Forums Support Dynamic data – post feature image as background linkable?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2313613
    STENCIL

    I’m using Query loop to show posts on a portfolio page within a grid – but I’ve set the feature image of the post in dynamic data as a background so I can have the title over the image. How can I link the background image to the post and give it a hover 100% fill colour?

    #2313687
    Ying
    Staff
    Customer Support

    Hi there,

    The Container link is a GB Pro feature. Not sure what hover 100% fill color means.

    However, you can give this solution a try:

    .gb-grid-wrapper.gb-grid-wrapper-72f4d116.gb-query-loop-wrapper .gb-container {
        position: relative;
    }
    .gb-grid-wrapper.gb-grid-wrapper-72f4d116.gb-query-loop-wrapper .gb-container a:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .gb-grid-wrapper.gb-grid-wrapper-72f4d116.gb-query-loop-wrapper .gb-container:hover a:after {
        background-color: rgba(0,0,0,0.5);
    }
    #2314228
    STENCIL

    The hover 100% colour – I wanted the container with the background image in to have a hover over of colour, so the image is no longer visible but a solid colour is. That would only be required if the container could link.

    I’m on the premium version – is that not what you mean? How do I get pro?

    #2314268
    David
    Staff
    Customer Support

    Hi there,

    Ying is referring to the GenerateBlocks Pro plugin:

    https://generateblocks.com/pro/

    If you don’t have Pro, the try this:

    1. Add the following CSS to your site

    .post-overlay {
        position: relative;
    }
    
    .post-overlay h2 a:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;z-i
    }
    .post-overlay:hover h2 a:before {
        background-color: rgba(0,0,0,0.5);
    }

    2. Edit the Query Loop block, and select the Container Block that has the featured image background set, and in Advance > Additional CSS Class(es) add: post-overlay

    #2314274
    STENCIL

    Thank you, is that just a hover effect without a link on the container?

    #2314285
    David
    Staff
    Customer Support

    It does the Hover effect and Container link.
    What the CSS does, is make the ‘link’ cover the entire container, and change the links background when you hover over it.
    This part of the CSS:

    .post-overlay:hover h2 a:before {
        background-color: rgba(0,0,0,0.5);
    }

    Is where you can to change the overlay color.

    #2314294
    STENCIL

    ah it is working now – I think the other topic css replacement helped, ty for the work around.

    The text I have over the top – is there a way for that to be visible still when the fill hover happens?

    Text was to change from white to black on hover as the image changes to fill.

    #2314303
    David
    Staff
    Customer Support

    If you edit the Query Loop and select the Headline Block that is showing the Title, in the sidebar Color settings – see the Link Colors. Change those to what you require, the second color is for its Hover state.

    #2314318
    STENCIL

    I already had that setup, but I think the images overlay fill is covering it up.

    #2314379
    David
    Staff
    Customer Support

    OK, remove that CSS, and try this:

    .post-overlay {
        position: relative;
    }
    
    .post-overlay h2 a {
        padding: 30px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .post-overlay:hover h2 a {
        background-color: #00fce7;
    }
    #2314403
    STENCIL

    Awesome thank you David – have a wonder day!!

    #2314454
    David
    Staff
    Customer Support

    You too. Glad to be of help.

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