Text Over Image On Hover In Portfolio Style Category

[Smarty]

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

[Brad Dalton]

Try this http://www.carriedils.com/text-overlay-image/

---

Tutorials for StudioPress Themes.

[Smarty]

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

[Brad Dalton]

Try this http://demo.hongkiat.com/css3-image-captions/index.html

---

Tutorials for StudioPress Themes.

[Smarty]

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

[Gina]

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

[Gina]

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

[Gina]

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!

[Brad Dalton]

Don't think there is one for this.

---

Tutorials for StudioPress Themes.

[Smarty]

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

[Brad Dalton]

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?

<div class="view view-second">
    <img src="&quot;images/5.jpg&quot;" />
    &lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;content&quot;&gt;
        &lt;h2&gt;Hover Style #2&lt;/h2&gt;
        &lt;p&gt;Some description&lt;/p&gt;
        <a href="&quot;#&quot;">Read More</a>
    &lt;/div&gt;
&lt;/div&gt;

Thanks

---

Tutorials for StudioPress Themes.

[Smarty]

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

[Smarty]

Sorry Brad, pressed 'Submit' to quickly...

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

 
<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

[Brad Dalton]

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.

---

Tutorials for StudioPress Themes.

[Smarty]

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

[Author]

Posts