{"id":1929,"date":"2013-11-12T15:33:15","date_gmt":"2013-11-12T15:33:15","guid":{"rendered":"http:\/\/wiki.davelevy.info\/?p=1929"},"modified":"2023-12-29T00:43:41","modified_gmt":"2023-12-29T00:43:41","slug":"pop-up-meerkats","status":"publish","type":"post","link":"https:\/\/davelevy.info\/wiki\/pop-up-meerkats\/","title":{"rendered":"Pop Up Meerkats"},"content":{"rendered":"<p>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 &#8230;<\/p>\n<p><!--more--><\/p>\n<p>Here is the original website guide and example,<\/p>\n<ul>\n<li><a href=\"https:\/\/web.archive.org\/web\/20160926215340\/http:\/\/codepen.io:80\/sahil4test\/pen\/xERYvX\">https:\/\/codepen.io\/sahil4test\/pen\/xERYvX<\/a><\/li>\n<\/ul>\n<p>I originally found the following URL, and the stack overflow pages in 2020.<\/p>\n<ul>\n<li><a title=\"this page seems to have gone\"><del datetime=\"2016-06-03T22:26:28+00:00\">http:\/\/www.code-sucks.com\/code\/css\/popup-images-on-rollover.php<\/del><\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/27004136\/position-popup-image-on-mouseover\">https:\/\/stackoverflow.com\/questions\/27004136\/position-popup-image-on-mouseover<\/a><\/li>\n<li>https:\/\/stackoverflow.com\/questions\/23859407\/how-to-change-opening-a-new-window-method<\/li>\n<\/ul>\n<p>The code and CSS is on this page, I have also built <a href=\"http:\/\/davelevy.info\/Downloads\/test-popup.htm\">a version using it, here<\/a>. 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 <a href=\"https:\/\/davelevy.info\/wiki\/nwn2-the-harp-the-crysanthemum\/\">the Harp and the Chrysanthemum<\/a>.<\/p>\n<h3>The Code<\/h3>\n<p>Here&#8217;s the CSS code<\/p>\n<pre>&lt;STYLE&gt;\n  a.imPop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { position:relative; z-index:20; }\n  a.imPop:hover { display:inline; z-index:30;}\n  a.imPop span  {display:none;}\n\n  a.imPop:hover span { display:block; position:absolute; \n                       top:1em; left:1em;\n                       width:64px; height:64px;}\n&lt;\/STYLE&gt;<\/pre>\n<p>N.B. The size of the displayed image is defined in the CSS.<\/p>\n<p>At some point, my theme decided to hold &#8220;additional CSS&#8221; 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.<\/p>\n<p>Here&#8217;s the picture, we plan to use,<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" title=\"This version of the image is hosted at davelevy.info, and implemented as a hyperlink\" src=\"http:\/\/davelevy.info\/images\/wiki\/ao.png\" alt=\"\" width=\"300\" height=\"218\"><\/p>\n<p>When fixing the code, I reused a version of the image in this &#8216;press instance&#8217;s media library.<\/p>\n<p>Here&#8217;s the HTML,<\/p>\n<pre>&lt;a class=\"imPop\" title=\"sample\" href=\"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2013\/11\/ao.png\"&gt;Meerkat\n&lt;span&gt;\n&lt;img src=\"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2013\/11\/ao.png\" alt=\"ao\"  border=\"0\" \/&gt;\n&lt;\/span&gt;&lt;\/a&gt;<\/pre>\n<p>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>Code Embed<\/code> .<\/p>\n<h3>An example<\/h3>\n<p><p style=\"font-face: san-serif;\">To see the pop up picture effect, hover over the word, <a class=\"imPop\" title=\"sample\" href=\"http:\/\/wiki.davelevy.info\/wp-content\/uploads\/2013\/11\/ao.png\">Meerkat<span>\r\n<img decoding=\"async\" src=\"http:\/\/wiki.davelevy.info\/wp-content\/uploads\/2013\/11\/ao.png\" alt=\"ao\"  border=\"0\" \/><\/span><\/a>, the picture should pop up<\/p><\/p>\n\n\n<style>\na.imPop { position:relative; z-index:20; } \na.imPop:hover { display:inline; z-index:30;} \na.imPop span {display:none;} \na.imPop:hover span { display:block; position:absolute; top:1em; left:1em; width:64px; height:64px;}\n<\/style>\n\n<a class=\"imPop\" title=\"sample\" href=\"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2013\/11\/ao.png\">\nMeerkat <span> <img decoding=\"async\" src=\"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2013\/11\/ao.png\" alt=\"ao\" border=\"0\"> \n<\/span>\n<\/a>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9901,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_share_on_mastodon":"0"},"categories":[3],"tags":[251,595,54,253,597,101,596,911],"class_list":["post-1929","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-css","tag-hover","tag-howto","tag-html","tag-hyperlink","tag-images","tag-pop-up","tag-technology"],"share_on_mastodon":{"url":"","error":""},"jetpack_featured_media_url":"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2013\/11\/meercat-ronanhello-unsplash-w1080.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/1929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/comments?post=1929"}],"version-history":[{"count":18,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/1929\/revisions"}],"predecessor-version":[{"id":7573,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/1929\/revisions\/7573"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media\/9901"}],"wp:attachment":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media?parent=1929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/categories?post=1929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/tags?post=1929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}