text overlay image post???

Transparency and hover activation?

I want the image to be always visible, when the user hovers over the image then the title/metadata fades into view at the bottom of the image overlayed.

alternatively i’d be happy with just getting the text to overlay the image post at the bottom without the hover functionality…

i’ve searched around for a plugin that’ll do this with no luck so far.

Give the postinfo element a negative top margin, set the transparency to 0 (via css), then set the hover (css) state to increase the transparency… would be the easy (non-script) way…

Else, you’re looking for a jQuery solution.. (which shouldn’t be taxing at all, because you already have it loaded in your page)

What you’d proberly need to do is place your meta / postinfo stuff inside another element, hide the postinfo element onload, then have some basic jquery fade in the element when the containing element is hovered (that’s the new one you place it in).

Again it would proberly be easier to position the containing element by using a negative top margin. The alternative would be to change your post image to act as a background, instead of an image, but you’d proberly have to re-write other areas of your code, so with that in mind the negative margin seems like the best approach..

I might be able to help if you want to try the jQuery route, though i’d need to check the cheatsheet for a reference for hover functions (i’ve not done a whole lot of jquery).

Many thanks t31os_
I do have jquery loaded via the LazyLoad plugin, I have tried hardcoding the load jquery function into the header and also into functions.php but couldn’t get it to work and so I used the LazyLoad plugin instead for the fading images on scroll.
I’ll try the negative top margin and see if that works.
Thanks again for your help.
M