is it possible to customize gk title overlay

I would like to maybe have a background on top of the image but with the title on top of the background, please see image attached for reference

Hello,

I'm sorry but I'm not sure which element do you want to customize? which image do you mean?

When you use the gk title over widget you are able to display a title on top of an image. What i want to know is can i give the title itself a background which also sits on top of the post image. i would like it to look like the image i peviously posted

as you can see from my image, i have a title but i would like a solid black background underneath it to look like the first image i uploaded

Try to add this code into override.css file:

Code: Select all

.gk-grid-title-overlay > figcaption {
   background: rgba(0, 0, 0, 0.7);
}


despite applying the css nothing has happend

Are you sure? Please check the attachment. Now if you want to change title position - you can do it in your GK Title OVerlay widget (change "Title position" to "top").

this is exactly what i want but it has not appeard on my site

Please refresh your browser's cache, or check another browser.

it is working now thank you.

Is there anyway to have it anitmated so when you hover it comes up. please see this site for what i mean www.eighty85.com

Only something like that:

Code: Select all

.gk-grid-title-overlay[data-textpos="bottom"] > figcaption {
   bottom: -100%;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}

.gk-grid-title-overlay:hover > figcaption {
   bottom: 0;
}


Title visible only on hover. Layout from mentioned website requires more modifications - unfortunately beyond our technical support.

Thank you so much i really appreciate it

My last question is, my grid blocks that are 1 by 1 do not display the text properly and with and the when i apply the title over lay the box shadow takes up the whole block instead of just the bottom section

Add this code:

Code: Select all

#gk_grid-4 .gk-grid--5 .gk-grid-title-overlay > figcaption h3 {
    font-size: 13px;
}


#gk_grid-4 is id of your grid at the top, and .gk-grid--5 is css selector for 5th grid block.
Editing this code you can adjust font-size for each block.

e.g. for block nr 7 use this selector:

Code: Select all

#gk_grid-4 .gk-grid--7 .gk-grid-title-overlay > figcaption h3

is there a way i could target all the small grid blocks at top at once?

Unfortunately, it's not possible.

i have copied the code to make the text smaller for each indvidual block but it does not seem to work for me

You have only block 5 in your override.css, add/change it into this code:

Code: Select all

#gk_grid-4 .gk-grid--5 .gk-grid-title-overlay > figcaption h3,
#gk_grid-4 .gk-grid--7 .gk-grid-title-overlay > figcaption h3{
    font-size: 13px;
}


i deleted the animation css but it still animates.

When i make changes they are never instant i have to wait hours to see a change. i need to figure a way around this any suggestions?

which animations - from the override.css file? Do you have some cache plugin installed? If not, please ask your server provider if there's any cache settings conifugured on your server.

i have the go daddy managed wordpress hosting, i had the figcaption hover on but i deleted it, yet is still appears on my site. how do i use cache settings? ( i used it once and it deleted my site)

and yes animations from my overridefile.css

On your gk grid widget, did you set cache settings to 0?

yes i did set it to 0

and cache settings from your TItle Overyla widget? We are using cache only with widgets, so if you set it to 0 and still have problem with that, you should ask your server provider. When you change override.css file, check also another browser, because it may be also problem with browser's cache.

i have contacted my host and they cannot see anything wrong, they have flushed my cache also. Can you please check my override.css file for any errors

I don't see any error in your override.css file - and there's no animations in your gk grid blocks title - on the black backgorund.

its okay its finally updated which is strange. Is there anyway i could pay for you to develop the 3 column article blog page for me?

Regarding custom work, please send me a Private Message with details.