It is possible to do it with CSS only but you have to make the list items into anchor links. Basically you load the images on the page where they can’t be seen using CSS and then use the :hover to make it visible. See the HTML and CSS below.
<li id="pu_images">
<a class="text" href="#text">Your Text Here
<span>
<img src="/path/to/images/image1.jpg" />
</span>
</a>
.text:hover{
background-color: transparent;
}
.text span{ /*CSS for enlarged image*/
position: absolute;
margin:0;
background-color: lightyellow;
padding: 0;
left: -1000px;
border: 0;
visibility: hidden;
color: black;
text-decoration: none;
}
.text span img{ /*CSS for enlarged image*/
border: 0;
padding: 2px;
}
.text:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 100px;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
You have to make sure that the container that the absolutely positioned elements has its css position value set explicitly. In addition the container must have its z-index defined to a lower value than that of the text:hover span.
I did something similar with images for a site recode I did for a client. It shamefully won’t validate but you can look the example here:
http://novascotiaproperties.info/ . If you hover over the header images you will see a larger version of the image below.
This replaced an arcane combination of images, javascript and a poorly written image map. Nearly 100-200 lines of code in the original HTML file. Now because it is CSS and if people come back to the site they pull everything from the cache.
Hope this helps.
BTW I can’t remember where I found this technique. I think I did a Google Search for "pure CSS popup image" or some such.
Cheers,
Jay
MODX Staff