Text Over Image On Hover

[Smarty]

Hi All,

I am looking to create a services page similar to this page, in that we have the hover effect with text over the image / icon;

http://www.madebypfd.com/services

Maybe I am complicating things, but I am thinking a portfolio style page as per Brian's instructions here;

http://www.briangardner.com/portfolio-page/

That way I have a page/category using featured images from my respective posts, however, when a visitor hovers over an image / icon it displays text on a transparent backround.

Brad has previously suggested this; http://demo.hongkiat.com/css3-image-captions/index.html, although I am thinking there must be a way to expand on Brians portfolio page but include an on hover class with text, I just can't workout how to do it!

Just to recap;

1. a portfolio style page
2. hover over image and you get text overlay on transparent background
3.once you hover, click on an image and you go to a post/post (as per Brian's portfolio page) describing (in my case) the service.

I guess the perfet scenario would be to use featured image as Brian does and add to that the post title and image caption as the hover text together with a button!

I have had a look at some plug ins but they are not ideal and also heavy, I want light code (responsive) so as not to affect page load.

Brad previously sugested this link; http://demo.hongkiat.com/css3-image-captions/index.html, a good soution, but I would really like to tie it into Genesis - if that makes sense.

I don't have a page to view as the site is still being built, we are using Modern Portfolio theme.

Thanks

---

Web Design, Development & Consultancy

Being The Best He Can Be! | http://www.paul-smart.co.uk

[Susan]

As you posted this over 3 months ago, I am hoping that you got your issue resolved. If not, please respond back here, and I will escalate for you.

Thanks!

[Author]

Posts