Text Over Image On Hover In Portfolio Style Category

Community Forums Forums Design Tips and Tricks Text Over Image On Hover In Portfolio Style Category

This topic is: not resolved

This topic contains 14 replies, has 3 voices, and was last updated by  Smarty 1 year, 2 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #52121

    Smarty
    Participant
    Post count: 36

    Hi All,

    I wonder if someone might be able to help!

    I would like to have text over image on hover in a specific category very similar to this example here;

    http://wpshower.com/demo/?theme=imbalance

    I do not have it on any pages yet so I cannot link to anywhere.

    I was thinking along the lines of a “Portfolio” type set up as done in the Minimum 2.0 theme (explained here; http://genesistweaks.com/adding-the-minimum-2-0-portfolio-to-a-different-genesis-theme/). As this covers posts, category and responsive design.

    What I can’t work out is how to add the text on hover to the category thumb image but not the post / large image.

    Can anyone help and if I am going in totally the wrong direction please say!

    Thanks

    Any help is much appreciated.


    Web Design, Development & Consultancy

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

    #52138

    braddalton
    Participant
    Post count: 10157
    #52140

    Smarty
    Participant
    Post count: 36

    Hi Brad,

    Thanks for the idea, althouh I am not sure this will do what I need.

    I am looking to have 4 – 6 images on a page (not homepage) and when you hover over the image text is overlayed together with a semi transparent background (as soon as you mve your mouse away it reverts back to image only).

    It is basically for a services page – For example; An image or icon of a monitor and when you hover over it says “Website Design – we offer blah blah blah”.

    Hope that makes sense.

    Thanks


    Web Design, Development & Consultancy

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

    #52145

    braddalton
    Participant
    Post count: 10157
    #54262

    Smarty
    Participant
    Post count: 36

    Hi Brad,
    Just realised I had not replied.

    Thanks your advice is really appreciated.


    Web Design, Development & Consultancy

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

    #55248

    Gina
    Participant
    Post count: 9

    Hi Brad, I went to this link but can not figure out how to get the code/plugin…http://demo.hongkiat.com/css3-image-captions/index.html

    can you recommend a plugin (I’m using Minimum theme) that I can use to create a page (like a portfolio) that showcases work like the top middle “full caption”
    option on the link

    thank you,
    Gina

    #55249

    Gina
    Participant
    Post count: 9

    I just found the source here: http://www.hongkiat.com/blog/css3-image-captions/
    pls disregard my question.

    #55255

    Gina
    Participant
    Post count: 9

    Sorry for the back and forth but this will not work – can you pls recommend a plugin to make a page with images and slide overs like the top middle “full caption” on http://demo.hongkiat.com/css3-image-captions/index.html – thanks!

    #55257

    braddalton
    Participant
    Post count: 10157

    Don’t think there is one for this.


    #55623

    Smarty
    Participant
    Post count: 36

    Hi Gina,

    I have done quite a bit of research trying to find a plugin for this and Brad is absolutely right, there does not seem to be one!

    Well, I found a couple that had not been updated for over 2 years and would not be inclined to use anything like that as it is usually a recipe for disaster.

    I am currently building a site and am using one of the image hover effects found here;

    http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

    I have modifyed the styling a little to suit my needs and it works fine. I am using Modern Portfolio theme.

    Hope this helps


    Web Design, Development & Consultancy

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

    #55627

    braddalton
    Participant
    Post count: 10157

    Nice tutorial.

    I’ll give it a go as i know even with the code sometimes its a challenge to install it properly.

    How did you add the markup to each portfolio item?
    [html]
    <div class="view view-second">

    <div class="mask"></div>
    <div class="content">
    <h2>Hover Style #2</h2>
    <p>Some description</p>
    Read More
    </div>
    </div>
    [/html]

    Thanks


    #55667

    Smarty
    Participant
    Post count: 36

    As yet I have not used this on a portfolio page, just a widget on my homepage.

    A portfolio style page is my next step, it would be good to include this within the upload of image.

    Do you know if there is anyway to make the image caption appear on rollover and if there is should we even consider it!

    For what I need I will probably create the page manually, although I can see a potential demand for portfolio pages with a text rollover on images – any ideas?


    Web Design, Development & Consultancy

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

    #55671

    Smarty
    Participant
    Post count: 36

    Sorry Brad, pressed ‘Submit’ to quickly…

    If it helps, here is the content of my widget;

    &nbsp;
    <h3>Recent Projects<h3>
    <div class="view view-first">
        <img src="wp-content/uploads/2013/06/ps-magicbrothers-hm.jpg" />
        <div class="mask">
            <h2>Magic Brothers</h2>
            <p>PROJECT INCLUDED:<br/>Website &middot; Icons &middot; Logo &middot; Social Media &middot; Topspin &middot;<br/> Album & Print Media &middot; Consultancy</p>
            <a href="#" class="info">Find Out More</a>
        </div>
    </div>
    <div class="view view-first">
        <img src="wp-content/uploads/2013/06/ps-vintagephotorepair-hm.jpg" />
        <div class="mask">
            <h2>Vintage Photo Repair</h2>
            <p>PROJECT INCLUDED:<br/>Website &middot; Social Media &middot; Custom Forms &middot; Business & Marketing Consultancy</p>
            <a href="#" class="info">Find Out More</a>
        </div>
    </div>
    <div class="view view-first">
        <img src="wp-content/uploads/2013/06/ps-dw-records-hm.jpg" />
        <div class="mask">
            <h2>DW Records</h2>
            <p>PROJECT INCLUDED:<br/>Website &middot; Logo &middot; Marketing &middot;<br/> Management & Business Consultancy</p>
            <a href="#" class="info">Find Out More</a>
        </div>
    </div>
    &nbsp;

    Also, my website which is far from completion is;

    http://www.paul-smart.co.uk/


    Web Design, Development & Consultancy

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

    #55687

    braddalton
    Participant
    Post count: 10157

    Looks awesome.

    The problem i have is i’m using a CPT for my portfolio page which also uses the genesis featured posts widget and settings so not sure how to add markup to existing a new featured images using that method.


    #55703

    Smarty
    Participant
    Post count: 36

    I would have prefered a similar method myself, but could not figure out how to do it either & as I only have 3 images I thought I would compromise!

    This is an old plugin I found that uses shortcode, I am wondering if this can be adapted, my initial feeling is that this is OK for individual images but not for a portfolio page.

    http://wordpress.org/plugins/css3-text-and-image-overlay/

    I was then wondering if it is possible to adapt Brian Gardiners Portfolio Page How To… to maybe include the ‘image caption’ or a custom field as the image rollover text, something along those lines anyway, I am just yet to figure it out.


    Web Design, Development & Consultancy

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

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

You must be logged in to reply to this topic.