TUTORIAL: Image Overlay

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Introduction


I recently implemented a feature on an iPhone wallpaper site that makes it possible for visitors to see a wallpaper both by itself, and then when their mouse hovers over the thumbnail, view it with the overlay that an iPhone generally displays over the background.

Attachments:
screenshot.jpg

It's Alive -- Photo manipulation by Michael Oswald (bymichaelo.com). One of the many works of art Michael was nice enough to let me feature on the iPhone site.



Rather than have two thumbnail images -- one for the normal view and another for the overlay view -- I decided to keep the existing thumbnail images and just use a 32-bit PNG overlay with semi-transparency. Doing it this way means I don't end up using twice as much disk space for thumbnails, don't have to make twice as many HTTP requests for thumbnail images, and don't have to generate all new thumbnail images to use like CSS sprites.

There is one issue with this method, it will require CSS hacks for PNG transparency to work properly in IE6. Since those hacks are outside the scope of this tutorial, I'll leave it up to you to implement them if you require IE6 support. Chances are that if you need them, you're already going to have the hacks implemented for another feature already anyways. :)


My Requirements


When I set out to make this work I wanted a few things.

  • Keep the semantic meaning of the <a> and <img> elements already in place
  • Falls back to a normal thumbnail linked to a fullsize image behavior gracefully
  • No Javascript required, CSS only

I wanted to keep the semantic meaning of the <a> and <img> elements so search engines know what the things are.

The reason I wanted to use CSS instead of JS didn't have anything to do with graceful degradation of the effect if that's what you're thinking. It had everything to do with simplicity, it's just easier to do it with CSS than it would be with JS since there's no animation involved.


HTML and CSS


The HTML was fairly simple. I only needed to add a class and style attribute to my <a> element, and wrap the <img> in a <span>. Since I'm using an XHTML-transitional DOCTYPE the align attribute is valid on an <img> and is used in my case to pull the alignment of the next element up level with the top of the <img>.

HTML Code: [ Select ]
<a class="iphone-overlay" style="background-image:url('{thumbnail}');" href="{wallpaper}" title="{title}">
    <span>
        <img src="{thumbnail}" alt="{alt}" width="{width}" height="{height}" align="left" />
    </span>
</a>
  1. <a class="iphone-overlay" style="background-image:url('{thumbnail}');" href="{wallpaper}" title="{title}">
  2.     <span>
  3.         <img src="{thumbnail}" alt="{alt}" width="{width}" height="{height}" align="left" />
  4.     </span>
  5. </a>


The CSS is fairly simple as well.

CSS Code: [ Select ]
a.iphone-overlay * {margin:0; padding:0;}
a.iphone-overlay, a.iphone-overlay span {display:block; float:left;}
a.iphone-overlay span {background-image:url("iphone-overlay.png"); visibility:hidden;}
a.iphone-overlay:hover span {visibility:visible;}
a.iphone-overlay img {visibility:hidden;}
  1. a.iphone-overlay * {margin:0; padding:0;}
  2. a.iphone-overlay, a.iphone-overlay span {display:block; float:left;}
  3. a.iphone-overlay span {background-image:url("iphone-overlay.png"); visibility:hidden;}
  4. a.iphone-overlay:hover span {visibility:visible;}
  5. a.iphone-overlay img {visibility:hidden;}



How it works


The <a> and <span> elements are given a block display so that they can be assigned a background image. The <img> element is given a width, height, and uses visibility instead of display so that the parent elements (<a>, <span>) do not collapse around it.

When all goes well, the <img> element functions like a piece of glass that holds a pair of rubber bands open.

By default both the <span> and <img> element have a visibility of hidden, so that the background for the <a> element, which happens to be pointing to the same image the <img> element points to, will show through what is essentually functioning like two pieces of glass.

Here is a visualization of how things stack up.

Attachments:
visualization.jpg


When everything is supported the <img> element is always hidden and simply functions like a piece of glass all the time. If for some reason there is no CSS support, the <img> element just displays the image instead of letting the <a> background show through. Since they're the same image, it looks the same either way.

When the mouse hovers over the link, the visibility of the <span> element which uses the iphone overlay as a background is made visible. Since the overlay is a semi-transparent PNG it allows the wallpaper image to show through like it would on an iPhone.

Conclusion


There's probably a hundred ways to achieve this effect, but for me this has been the easiest to implement on an existing site.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 3 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.