← 50-50 Chance

Image MouseOver Borders

CSS Border TrickFour 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.

Hatkirby on December 11th, 2007 at 7:23:33am
👍 1 👎


Other than this nice, hopefully neat CSS Trick, what's new on Four Island? Of course, post summaries!

Hatkirby on December 11th, 2007 at 7:38:00am

Its nice, pretty

ps- eggs are really really cool; they have neat traveling ways

pinkxo on December 17th, 2007 at 4:10:00am

Um, thanks pinkxo.

Hatkirby on January 23rd, 2008 at 4:52:00am

....OMG I just understood that! Thanks for the reference, pinkxo!

For those uninformed, my aunt once called my mother and asked her to bring over a couple of eggs. Since we were currently living at our Nana's house and Nana apparently didn't want Mom stealing any eggs, we heard her reply with this snippet of wonders:

"Ok, but I'm going to have to put on a bigger bra."

Hatkirby on May 31st, 2008 at 5:44:27am
Replying to comment by :
Feel free to post a comment! You may use Markdown.