Pop-up image Script
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:
Insert the below code into the <HEAD> section of your
page:
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">