Great CSS Effects #1

There are some great effects for websites that can be done with CSS. Today, I would like to talk about image pop-ups, this can be defined as scrolling over an image and having it enlarge. This is a very useful effect when working with images and trying to keep the initial size of those images small enough to look presentable. Click here for an example.

First you will have to declare it in your CSS, copy the following code into popup.css, or jsut copy mine here.

#pic { background-color: #FFFFFF; left: 10px; position: relative; top: 10px; width: 135px; } #pic a .large { border: 0px; display: block; height: 1px; left: -1px; position: absolute; top: -1px; width: 1px; } #pic a img { border: 0; } #pic a.p1, #pic a.p1:visited { background: #FFFFFF; display: block; height: 90px; left: 0; text-decoration: none; top: 0; width: 135px; } #pic a.p1:hover { background-color: #8C97A3; color: #000000; text-decoration: none; } #pic a.p1:hover .large { border: 1px solid #000000; display: block; height: 400px; left: 150px; position: absolute; top: -60px; width: 550px; }

To sum this up, you are going to have a thumbnail and your large image when you load your page. Your large image however will only load a 1 pixel x 1 pixel, and upon a mouseover if will "jump" left 150 pixels and down 60 pixels. Now, you have to declare this in your html otherwise you will display both images at the declared sizes. In your HTML add this code:

<div id="pic"> <a class="p1" href="#" title="thumbnail image"><img src="snowflake_thumb.png" alt="thumbnail image" width="200" height="150" title="Thumbnail image" alt="thumbnail" /><img src="snowflake.png" alt="Mouseover version" width="800" height="600" class="large" title="Enlarged view of image" /></a> </div>

The first 'img' tag calls the thumbnail and sets the size. The second 'img' tag sets the size for the mouseover version. The first 'alt' tag sets the alternate text for the thumb and the second 'alt' tag is for the larger image. If you want a full working example that you can get the source HTML code from click here. In our next article we will be using creating a lightbox effect with CSS.