Users sometimes ask how to create content that shows up only upon hover. If you have the Custom Design upgrade, this is rather easy. If you don’t have the upgrade, it’s very complicated but possible.
A. If you have the Custom Design upgrade
The solution I’m suggesting here makes the post column expand vertically to reveal the spoiler content when you hover over a word such as “Spoiler” – or any other word or phrase you might prefer, as long as you’d like to mark the existence of each and every spoiler with the same word or phrase.
(If you are interested in a different solution, you can post your question in the wordpress.com CSS forum.)
Add this code in the CSS editor:
And format each spoiler this way in the so-called Text editor (make sure there’s a blank line between the opening div and the beginning of the text):
Notice that the word “Spoiler” (or the word or phrase you’ll use instead of this one in the content rule) is incorporated in the CSS, so it’s introduced automatically: you don’t actually type it in the Text editor before each spoiler.
The suggested CSS is a discreet version, with the word “Spoiler” underlined, and no differentiation in the spoiler text (other than a top and a bottom border to separate it from the regular content). Naturally you can add more CSS rules to change the styling.
I don’t have the CSS upgrade on this blog, so I can’t display an example here. Here’s a screenshot (for a live example see this demo post [Sorry, upgrade on that blog has expired]):
B. If you don’t have the Custom Design upgrade
A simple way to create rollover text would be this code in the Text editor:
For the result, hover over this word. It’s a crude solution, as you cannot change the styling of the rollover text or add line or paragraph breaks.
Other than this, WP staff would probably say you can’t create hover effects without the upgrade. This isn’t exactly true, because our blogs include rollover items that are produced solely by means of CSS: namely, the dropdown or flyout menu lists. So you can create similar effects if you use the IDs and classes that are used for these lists.
The basic coding would be something like this:
- sub-menu”>
Unfortunately a) the parts I have highlighted vary from theme to theme, b) in most cases the default styling will be monstrous in a post (since it’s designed for the top menu), so you’ll need lots of additional coding to modify it. To find what the appropriate IDs and classes are, as well as what properties and values you should change, you need to examine the stylesheet of the theme you’re using (best way: the Firebug add-on in Firefox). So I’m only pointing this out as a general possibility – the rest depends on your coding skills.
Here’s an example (hover over the red text):
And here’s another one:
- Her
wordpress tips 
I’ve been wanting to do something like that last example (the “her” hover) for a long time panos, say for before and after image effects. I love to hear any suggestions you might have!
Posted by IzaakMak | March 16, 2013, 23:01Amazing, Panos! :-)
Posted by Galois | March 16, 2013, 23:02Very elegant! Congratulations. The photo especially–it’s almost a magical the way the image appears and then disappears when the cursor passes over the text!
I’ve been wanting a clunkier version of this, where a word or phrase is a link that the reader can choose to click on, and have, say, a definition or an image come up. Is that a possibility? (I don’t have the css upgrade, and probably can’t do anything as complex as what you outlined above, so haven’t looked very hard into this). That simple rollover text would probably be fine for a short definition, come to think of it…Thanks, Panos!
Posted by ingridcc | March 17, 2013, 05:22@GALOIS & INGRIDCC:
Thanks! As you probably know, I like inventing workarounds…
@IZAAKMAK:
But the trick you’re asking for might take hours to perfect, especially on 2010. If I needed it for my blog I might do it, otherwise no: you’d have to pay me a lot more than the Custom Design upgrade would cost you! (If you have the upgrade, you can do it in a couple of minutes. In fact, I’ll publish a post on how to do this if you have the upgrade.) To display begore/after image pairs without the upgrade, you could use a slideshow.
@INGRIDCC:
Clicking instead of hovering to reveal some hidden content is a different thing: it would require javascript, which we’re not allowed to use. To reveal an image, the best you can do with the available means (and without far-fetched solutions like the one I’m demonstrating on this post) is create a regular link that links to an image file in a new browser window.
Posted by Panos | March 17, 2013, 12:14I just found this. Brilliant!
Posted by timethief | March 21, 2013, 04:39Thanks! Brilliant maybe, but of little use to the average user who cannot work out the required coding…
Posted by Panos | March 21, 2013, 06:44Oh Panos….
Posted by Duto Sri Cahyono | April 5, 2013, 21:43Hi! This is exactly what I want to do. But it doesn’t work. The hidden text (to be shown with the spoiler) never hides. Only the line appears when the cursor moves over the spoiler. Can you help please? Here is a link to code, CSS and result print screens. Thanks in advance!
Posted by dominadeau | May 19, 2013, 11:28It’s not working because you omitted the blank line between the div and the spoiler text. My version targets paragraphs, and the WP editor doesn’t create a correctly formed paragraph if you start it immediately after an opening div tag.
And of course you can’t call this a spoiler in a CV: the word in the content rule should be changed to “Details” or something like that.
By the way, I don’t need screenshots: as long as I have a link to your site, I can see your code (as well as copy it and reproduce it in my tests blog, if necessary).
Posted by Panos | May 19, 2013, 15:24I’ve just found another way to create spoiler. It is using the details tag. But unfortunately it is currently only supported in Chrome and in Safari 6. Hope Firefox will support it soon.
Posted by ~ Yappa ~ | May 21, 2013, 06:38Thanks. That’s a new tag, and of course when it comes to spoilers we can’t suggest a way that doesn’t work in all browsers.
Posted by Panos | May 21, 2013, 14:54Thanks a lot Panos! Now working, but not on iPad and iPhone. Any solution?
http://dominiquegnadeau.wordpress.com/curriculum-vitae/
Posted by dominadeau | May 22, 2013, 06:33You’re welcome.
Unfortunately I don’t have experience with iPads and such, and I don’t have one at hand at the moment (my girlfriend forgot hers at another house!), so I can’t check things to see what might be causing this. We’ll probably have the iPad back by tomorrow or day after tomorrow, but you’d better ask about this in the wordpress.com CSS forum, where you may get a reply from WP staff.
Posted by Panos | May 23, 2013, 04:39oh!! nice.. is this available in wordpress plugin?? if yes.. link plzz.. :)
Posted by Muzammil Syed S | July 26, 2013, 14:06Can you take a look in koi theme and suggest me what to do with the last part in your post?
Posted by thai92hp | July 28, 2013, 00:24http://thai92hp.wordpress.com/
Help me with this blog.
Posted by thai92hp | July 28, 2013, 08:43See my reply to IZAAKMAK here:
https://wpbtips.wordpress.com/2013/03/16/spoiler-hover-content/#comment-52585
Posted by Panos | August 1, 2013, 03:05