Four Island

Four Island is about lots of stuff. One of those things are computer programming. So here I am with a small CSS trick.

If you were to look to the at the links on this site, you'll see that any picture inside a link gets a dashed border around it when it is hovered over. That part is simple to do. All you need is some simple CSS:

a:hover img {
 border: dashed gray 1px;
}

But, if you try that, the content around the pictures will move around when you hover over the picture. The real trick is bypassing that. All you need is to have a transparent border there if the link is not being hovered over, and a dashed one if it is:

a img {
 border: solid transparent 1px;
}

a:hover img {
 border: dashed gray 1px;
}

Because the new border is transparent, you obviously can't see it. It barely makes an impact on your page, and allows a nice border on link mouse overs.