- This topic has 11 replies, 3 voices, and was last updated 1 year, 7 months ago by David.
-
AuthorPosts
-
August 15, 2022 at 9:31 am #2313613STENCIL
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?
August 15, 2022 at 11:33 am #2313687YingStaffCustomer SupportHi 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); }
August 16, 2022 at 3:00 am #2314228STENCILThe 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?
August 16, 2022 at 3:30 am #2314268DavidStaffCustomer SupportHi 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
August 16, 2022 at 3:38 am #2314274STENCILThank you, is that just a hover effect without a link on the container?
August 16, 2022 at 3:47 am #2314285DavidStaffCustomer SupportIt 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.
August 16, 2022 at 3:57 am #2314294STENCILah 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.
August 16, 2022 at 4:15 am #2314303DavidStaffCustomer SupportIf 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.
August 16, 2022 at 4:41 am #2314318STENCILI already had that setup, but I think the images overlay fill is covering it up.
August 16, 2022 at 5:47 am #2314379DavidStaffCustomer SupportOK, 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; }
August 16, 2022 at 6:08 am #2314403STENCILAwesome thank you David – have a wonder day!!
August 16, 2022 at 6:48 am #2314454DavidStaffCustomer SupportYou too. Glad to be of help.
-
AuthorPosts
- You must be logged in to reply to this topic.