This effect is done entirely in CSS - not JavaScript.
Basically, when an image element "
img
" is directly contained by an anchor (link) element "a href=...
", I assign it a 2 pixel border:a[href] > img{
margin:2px;
}
Then, for when the same image element is being "hovered" over, I drop the margin and replace it with a 2 pixel-wide border. The border is black, except for the top and left which are white - to give it that "3D" look.a[href]:hover > img{
border:2px solid black;
border-top-color:white;
border-left-color:white;
margin:0px;
}
Finally, for when the mouse button is down (being pressed) on the image, I change the border color to a light red, with the top and left color being a dark red.a[href]:active > img{
border:2px solid #F99;
border-top-color:#900;
border-left-color:#900;
margin:0px;
}