CSS: dynamic image popups

In this post I'm going to show you how to create dynamic image popups using only CSS. Usually this kind of effect is achieved through the use of the declaration display: none combined with display: block. Although this solution could seem effective, it poses a major accessibility problem with screen reader which interpret the former declaration as speak: none, thus preventing de facto a screen reader from reading the content of an element.

Instead, we'll deploy our technique through a clever use of negative and positive absolute positioning. First, our HTML structure:

<div id="content">

     <li><a href="#">Link 1</a>
      <div class="popup">
        <img src="1.jpg" alt="" />
        <p>Caption 1</p>
    <!--more items-->

First, to position our popups correctly, we need to add, among other thing, the declaration position: relative to each list item:

#content {
  width: 50em;
  padding: 1em;
  background: #444;
  color: #fff;

#content ul {
 margin: 0;
 padding: 0;
 list-style: none;
 height: 100%;

#content li {
 margin-bottom: 0.5em;
 height: 100%;
 position: relative;

#content a {
 background: gray;
 color: #fff;
 padding: 0.3em;
 font-weight: bold;
 text-decoration: none;
 display: block;
 width: 100px;
 text-align: center;

#content div.popup {
 width: 250px;
 padding: 5px;
 background: #fff;
 position: absolute;
 top: -1000em;
 right: 0;
 border: 2px solid #ccc;

#content div.popup img {
 width: 90%;
 margin: 0 auto;
 display: block;
 padding: 10px 0 0 0;

#content div.popup p {
 margin: 0;
 text-align: center;
 padding: 5px 0;
 font-style: italic;
 color: #333;

On the normal state, we hide each popup by using negative absolute positioning. Then we add our effect on hover:

#content li:hover div.popup {
 top: 0;

On hover, the top property's value has been reset to 0. You can see a demo below. Note that the following demo doesn't work in IE6, because we've used the :hover pseudo-class on an element that is not a link.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.