Text Over Image On Hover

Community Forums Forums Design Tips and Tricks Text Over Image On Hover

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Susan 2 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #54285


    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;


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


    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.


    Web Design, Development & Consultancy

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



    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.


    Susan @ One Happy Studio I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.