Pop Up Meerkats

For various reasons I wanted to make a pop-up on hover using a picture. I 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

Related Posts

Leave a Reply

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