Text rollover = image popup

In the Customizr theme, the dropdown menu code won’t really work the way you would think it would; if you haven’t noticed, in order to display a submenu in Customizr, you have to actually click on the menu item, it won’t display on a simple mouse hover.

However, you can get the CSS from your example page to work pretty easily.

Copy & paste this CSS into the Custom CSS field (go to Appearance > Customiz’it!, scroll down and expand the Custom CSS field):

/* Set the style of the spoiler label */
.spoiler ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: red;
	font-weight: bold;
}

/* Hide the spoiler info */
.spoiler ul ul {
	display: none;
	color: black;
	font-weight: normal;
}

/* This CSS displays the spoiler info when the mouse is hovered over it */
.spoiler ul li:hover > ul {
	display: block;
}

Now create a page with the following (make sure you are using the Text editor and not the Visual editor):

Regular text here.
<div class="spoiler">
<ul>
   <li>Spoiler
      <ul>
         <li>
<img src="https://wpbtips.files.wordpress.com/2013/03/her.jpg?w=750" style="border: 1px solid red; padding: 5px;" />
         </li>
      </ul>
   </li>
</ul>
</div>
More regular text here.

Once you save the page and view it, mouse over the word Spoiler. You can see a demo here.

You can put any content, including images or text, that you like in place of that sample image.

Wow! Thank you, CrouchingBruin. I’ve got that working and now I just need to find a way to make it a span class rather than a div so that I can apply it in-line to a single word within a paragraph. I experimented with this but failed abjectly.

And for the icing on the cake I would like image to float on top of my page rather than push my layout down to make room for the image to display. Is this possible?

Just ignore if I’m pushing my luck here. I’m very grateful to you for taking a look at it for me.

Nice little exercise for me.

Updated CSS:

/* Set the spoiler contents to display inline */
.spoiler * {
  	display: inline;
}

/* Set the style of the spoiler label */
.spoiler ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: red;
	font-weight: bold;
	display: inline;
}

/* Hide the spoiler info */
.spoiler ul ul {
	display: none;
	color: black;
	font-weight: normal;
}

/* This CSS displays the spoiler info when the mouse is hovered over it */
.spoiler ul li:hover > ul {
	display: inline;
  	position: absolute;
}

And here’s how you’d create the paragraph:

<div class="spoiler">
Regular text here. There's a
<ul>
   <li>spoiler here.
      <ul>
         <li>
<img src="https://wpbtips.files.wordpress.com/2013/03/her.jpg?w=750" style="border: 1px solid red; padding: 5px;" />
         </li>
      </ul>
   </li>
</ul>
More regular text here.
</div>

I do appreciate your help with this, CrouchingBruin.

My version of your code generates a popup question mark (“?”) under my cursor instead of my image. Can you see where I’ve gone wrong (the image link is correct and used elsewhere in my site):

<div class="spoiler">
<strong>Seated Acupressure Massage?is the optimum stress relief treatment for busy, hard-working office personnel in the Thames Valley. If you are based within a
<ul>
   <li>20 mile radius of Marlow
      <ul>
         <li>
<img src="href="https://localhost:8888/sitename/wp-content/uploads/2013/12/servicemap.jpg?w=500" style=padding: 5px;" />
         </li>
      </ul>
   </li>
</ul>
, our <a href="#qualifications">qualified massage therapist</a>?will bring her purpose-designed acupressure chair to you at a convenient time for you and your staff. Each treatment lasts 15-20 minutes and up to eight people can receive this therapy during a single visit, in either a side room or an open plan office. Acupressure massage is ideal for the workplace as no clothing needs to be removed and no oils are used.</strong></div>

[caption id="attachment_462" align="alignright" width="240"]<img class=" wp-image-462         " alt="The acupressure meridian lines" src="https://localhost:8888/sitename/wp-content/uploads/2013/12/meridians-300x300.jpg" width="240" height="240" />The acupressure meridians[/caption]

Your staff will love the treatment – witness our

I have run on the text extract because, for some reason, this new code also knocks out the paragraph break which follows the hosting paragraph on the front end – even though it looks ok in the editor.

Here’s a screen grab:

https://i1008.photobucket.com/albums/af208/3785/public/hover.png

You’re missing a quotation mark in the style clause:
Change this:

style=padding: 5px;"

to this:

style="padding: 5px;"

Oops, sorry. But that isn’t my only error because fixing it doesn’t alter my “?” popup, unfortunately.

Just in case, here’s my CSS:

/* Set the style of the spoiler label */
.spoiler ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #8f48e2;
	font-weight: normal;
	display: inline;
}

/* Hide the spoiler info */
.spoiler ul ul {
	display: none;
	color: black;
	font-weight: normal;
}

/* This CSS displays the spoiler info when the mouse is hovered over it */
.spoiler ul li:hover > ul {
	display: inline;
  	position: absolute;
}

Another syntax error.
Change this line:

<img src="href="https://localhost:8888/sitename/wp-content/uploads/2013/12/servicemap.jpg?w=500" style=padding: 5px;" />

to this:

<img src="https://localhost:8888/sitename/wp-content/uploads/2013/12/servicemap.jpg?w=500" style="padding: 5px;" />

Thank you. Mea culpa *again*. The good news is that my image now shows up on mouseover. But not without paying a price for it. These are the consequences:

1. The paragraph immediately after this Div now attaches itself to the Div paragraph and refuses to separate, even after I force wrap it in p tags.

2. The Div paragraph was previously all bold with tags at the start and end. After adding the new code, the closing tag is auto-deleted and only the text preceding the code is bold; all text after the new code is resolutely normal.

3. Initially, the popup image overlaid my right sidebar and the text therein as well as the Search box were visible on top of my popup image. I assume I could have fixed this by changing some z attributes but I instead moved the image so that it popped up over the left side of my page where it bossed the z fight.

4. After adding the code, my visual editor looked like the dog’s dinner because my 500x500px popup image was permanently visible there.

5. At viewports smaller than 979px, my popup image was permanently visible without mouseover. I assume that has something to do with me forcing my 3-bar menu to take over from my navbar menu in viewports smaller than 979px (which is a modification I don’t want to sacrifice).

My conclusion, sadly, is that this prized mouseover functionality comes at too high a price for a novice to cope with and I will reluctantly, for now, give up on it.

Thank you for showing me how it could work though and I may return to it when I know what I’m doing.