Pop Up Meerkats

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. I returned to the problem in 2019 and found a new guide. Here are my notes again …

Here is the website guide and example,

The code and CSS is on the page, I have also built a version using it, here.

ooOOOoo

I originally found the following URL,

Here’s the CSS code

<STYLE>
  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;}
</STYLE>

Here’s the picture, we plan to use,

Here’s the HTML,

<a title="sample" href="http://davelevy.info/images/wiki/ao.png">Meerkat
<span><img alt="ao" src="http://davelevy.info/images/wiki/ao-w200.png" border="0" /></span></a>

The span tags are crucial and one needs to be careful about how wordpress deals with tags. The HTML can be implemented using the HTML add in, Code Embed or writing it natively using wordpress’s text editor.

ooOOOoo

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

One thought on “Pop Up Meerkats

  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.