July 23, 2013 at 1:16 pm #52121
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;
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!
Any help is much appreciated.
July 23, 2013 at 3:41 pm #52138July 23, 2013 at 4:13 pm #52140
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.
July 23, 2013 at 4:52 pm #52145August 5, 2013 at 11:48 am #54262
Just realised I had not replied.
Thanks your advice is really appreciated.
August 9, 2013 at 9:47 am #55248
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
GinaAugust 9, 2013 at 9:49 am #55249
I just found the source here: http://www.hongkiat.com/blog/css3-image-captions/
pls disregard my question.August 9, 2013 at 10:38 am #55255
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!August 9, 2013 at 10:47 am #55257August 11, 2013 at 8:03 am #55623
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;
I have modifyed the styling a little to suit my needs and it works fine. I am using Modern Portfolio theme.
Hope this helps
August 11, 2013 at 8:54 am #55627
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=""images/5.jpg"" /> <div class="mask"></div> <div class="content"> <h2>Hover Style #2</h2> <p>Some description</p> <a href=""#"">Read More</a> </div> </div>
August 11, 2013 at 1:24 pm #55667
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?
August 11, 2013 at 1:29 pm #55671
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 · Icons · Logo · Social Media · Topspin ·<br/> Album & Print Media · 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 · Social Media · Custom Forms · 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 · Logo · Marketing ·<br/> Management & Business Consultancy</p> <a href="#" class="info">Find Out More</a> </div> </div>
August 11, 2013 at 3:38 pm #55687August 11, 2013 at 5:03 pm #55703
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.
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.
You must be logged in to reply to this topic.