For various reasons I wanted to make a pop-up on hover using a picture. I have implemented a pop up meerkat in the blog. This broke at some point and I returned to the problem in 2019 and found a new guide, and again in 2020 where I fixed some theme/wordpress bugs. This is now working, here are my notes in which I document the CSS and HTML …

Here is the original website guide and example,

I originally found the following URL, and the stack overflow pages in 2020.

The code and CSS is on this page, I have also built a version using it, here. This all worked after the June 2020 patches. I had been inspired to fix this by making a pop-up modal for my article on the Harp and the Chrysanthemum.

The Code

Here’s the CSS code

  a.imPop       { position:relative; z-index:20; }
  a.imPop:hover { display:inline; z-index:30;}
  a.imPop span  {display:none;}

  a.imPop:hover span { display:block; position:absolute; 
                       top:1em; left:1em;
                       width:64px; height:64px;}

N.B. The size of the displayed image is defined in the CSS.

At some point, my theme decided to hold “additional CSS” in the database and so I needed to repost the CSS there as it failed to pick up code held in the child theme css file.

Here’s the picture, we plan to use,

When fixing the code, I reused a version of the image in this ‘press instance’s media library.

Here’s the HTML,

<a class="imPop" title="sample" href="">Meerkat
<img src="" alt="ao"  border="0" />

The span tags are crucial and one needs to be careful about how wordpress deals with tags and so the HTML must be implemented using the HTML add in, Code Embed .

An example

To see the pop up picture effect, hover over the word, Meerkat ao, the picture should pop up

Meerkat ao
Dave Technology , , , , , , ,

2 Replies

  1. At some point, wordpress munged the css, it seems that css no longer works from the inside out, and needs to be fixed. There’s a lot of failures.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.