Images and thumbnails, a pure CSS hack

aaron straup cope

Recently, I added some images to my weblog. I used some CSS kung-fu to toggle between a small version for prettier layout/design and a large version for viewing.

I accomplished this by re-assigning the image's height and width properties when the image was :hover-ed.

This was all well and good but for two things:

  1. It meant that even a person didn't want to view the large image, they still had to download it.
  2. When the image was viewed without it's associate stylesheet, for example in an RSS reader, it looked like shit.

So, I scratched my head for a few minutes and thought about how to include images that could:

  1. Toggle between a small version and a large version without downloading the large version before it is viewed.
  2. Toggle between a small version and a large version without JavaScript.
  3. Degrade gracefully in situations where the user-agent either doesn't support images or where they aren't necessarily germane. insert discussion concerning whether or not you should include markup in syndication feeds here.

It occurred to me that this ought to be possible by reassigning a container's background-image property when it is :hover-ed.

  The view from Ponte Garibaldi, Roma, August 2003

So far it has only been tested in Mozilla. Here's the source:

<html>
 <head>
  <title>Images and thumbnails, a pure CSS hack</title>

  <style type = "text/css">


.picture { 
   max-width: 450px;
   max-height: 450px;
   padding-left:20px;
   padding-bottom:10px;
}

.image { 
   display:block;
   border:1px dotted #666;
   margin:5px;
   margin-bottom: 0px;
   padding:5px;

   height:175px; 
   width:200px;

   background-repeat:no-repeat;
   background-position:5px 5px;
   background-attachment:scroll;
}

 .caption { 
   display:block; 
   font-family:serif; 
   color:#666; 
   margin-top:10px; 
   margin-left:5px;
}

span.image + span.caption:after {
   content : "mouse over to enlarge; may take a moment to load";
   display:block;
   color: #ccc;
}

#pnd { 
   background-image:url("/img/weblog/20030810-roma-punksnotdead-sm.jpg"); 
}

#pnd:hover { 
   height:350px;
   width:400px;
   background-image:url("/img/weblog/20030810-roma-punksnotdead.jpg"); 
}

  </style>
 </head>

 <body>

  <div class = "picture">
   <span class = "image" id = "pnd">&nbsp;</span>
   <span class = "caption">The view from Ponte Garibaldi, Roma, August 2003</span>
  </div>

</body>
</html>