Pop-up images on inline links

20th July 2006

Based on the javascript version that can be found here Link Thumbnails and my previous design for menu links, this one uses only CSS. This does mean that you will have to insert the image information by hand, but that is not really a problem. So links to this web site can now have images on display. Let's see how long before this new site layout is displayed.

The above screen dumps no longer work so I have removed these pop ups, but you can also use any image you like, for instance if you were describing a sparrowsparrow you could have a pop-up image to show your visitors. This could be a link or just a reference image.

copyright © stu nicholls - CSS play

Information

With the redesign of this site, I have had several requests to show how the old pop-up screen shots were done, such that when you hovered over a menu link you had a screen shot of the destination. Also I have seen this done using javascript for links to external websites.

So this is a combination of both ideas but done using just CSS.

The basic idea is to have the image in the link along with the text, then use CSS to give the image a zero size (you could use visibility:hidden;). The link is given a position relative and a high z-index to enable you to place the pop-up image in an absolute positon 'relative' to the link and to ensure that the pop-up image is placed on top of any surrounding elements.

When you hover over the link the image is then given its correct size and it pops-up, in this case beneath the link, but you can place it anywhere you like relative to the link.

This works in IE5.01 (although the z-index is ignored), IE5.5, IE6, Firefox, Opera 9 beta (Opera 9 has a bug) and probably most modern browsers on a PC and Mac.

Thumbnail images courtesy of Webdesignbook Reference Book

23rd July 2006

Placing the <b> tag around the image and styling this instead make it sort of work in Opera.


Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.


Please ask permission before using or copying this example to your web site.


Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.
softgeometrycreative{at}gmail.com

Follow CSS play


Facebook   Twitter   Facebook Fan Page