FF3+ IE10+ Opr8+

Pop-up image Script

Author: Dynamic Drive

Note: Script rewritten Dec 25th, 2014 to utilize CSS3

Description: Want a quick and lightweight method to make your images "pop up", but depressed when the mouse is held down over them? With the help of CSS3, you can! It creates the illusion of an elevated image by applying CSS3's box-shadow property to it and shifting the image to the up and left. When the user holds down the mouse, the shadow is deleted, and the image shifted back to its usual position. There's no need to create alternate versions of the same image, since the entire effect is generated through code. You may customize both the shadow length and color for each individual image in which the effect is applied to. Cool!

Demo:

Original Images Images with pop up script added

Directions: Developer's View
Insert the below code into the <HEAD> section of your page:

Select All

Giving an image a pop-up effect

Having done the above, to add the pop up effect to any image, just add the CSS class "popshadow" to the desired element:

<img src="dynamiclogo4.gif" class="popshadow">

Customizing the shadow for different images

Depending on the size and kind of image, you may wish to modify the shadow applied to it. By default, the style sheet that renders the effect looks like the following:

<style>

.popshadow{
position: relative;
left: -3px; /* offset depth */
top: -3px; /* offset depth */
box-shadow: 5px 5px 5px rgba(0,0,0,0.3); /* shadow x offset, y offset, intensity, and color rgba(red, green, blue, opacity (0-1)) */
transition: all .2s ease-in-out; /* 0.2s = transition duration */
}

.popshadow:active{
left: 0;
top: 0;
box-shadow: none;
}

</style>

The line:

box-shadow: 5px 5px 5px rgba(0,0,0,0.3);

creates the shadow, in the format: box-shadow: horizontalshadow, verticalshadow, blurstrength, rgba(blue,green,red, opacity). The line that follows:

transition: all .2s ease-in-out;

sets the transition type and duration (0.2s). Now lets say you have an image you wish to have a pop shadow that deviates from the above setting. Just create an additional CSS class that mimics the original one but with properties whose values differ from the original:

<style>

.popshadow{
position: relative;
left: -3px; /* offset depth */
top: -3px; /* offset depth */
box-shadow: 5px 5px 5px rgba(0,0,0,0.3); /* shadow x offset, y offset, intensity, and color rgba(red, green, blue, opacity (0-1)) */
transition: all .2s ease-in-out; /* 0.2s = transition duration */
}

.popshadow:active{
left: 0;
top: 0;
box-shadow: none;
}

.popshadow2{
left: -5px; /* offset depth */
top: -5px; /* offset depth */
box-shadow: 10px 10px 10px rgba(222,74,16,0.3);
}

</style>

"popshadow2" only contains properties where we wish to be different from the original "popshadow" class, in this case, a larger reddish shadow with a larger image offset. Then to apply the modified pop shadow effect to an image, we give that image both CSS classes:

<img src="desert.jpg" class="popshadow popshadow2">