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

[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?

[Ying]

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);
}

[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?

[David]

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

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

[STENCIL]

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

[David]

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.

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

[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.

[David]

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.

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

[STENCIL]

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

[David]

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;
}

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

[STENCIL]

Awesome thank you David – have a wonder day!!

[David]

You too. Glad to be of help.

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

[Author]

Posts