Voting Chart

Total votes : 9

how much time do you spend html-ing or css-ing before you get a headache?

  •  
    1 hour
  •  
    2 hours
  •  
    3 hours
  •  
    4 hours
  •  
    5 hours
  •  
    6 hours
  •  
    7 hours
  •  
    8 hours
  •  
    don't get a headache

How to get a .css border on hover around images

  • frans26
  • Novice
  • Novice
  • User avatar
  • Posts: 34
  • Loc: Close to Lao

Post 3+ Months Ago

Wow, spent so much time trying to get a border around my thumbnail images that changes on hover. in css.
understand?

For example hover over the images on http://www.trekearth.com .
Notice how the border around the thumbs changes from light to dark blue

Their css code looks like this:
Code: [ Select ]
a:link img.thumb-border {border: solid #6699FF 1px}
a:hover img.thumb-border {border: solid #003399 1px}
a:active img.thumb-border {border: solid #999966 1px}
a:visited img.thumb-border {border: solid #003399 1px}
  1. a:link img.thumb-border {border: solid #6699FF 1px}
  2. a:hover img.thumb-border {border: solid #003399 1px}
  3. a:active img.thumb-border {border: solid #999966 1px}
  4. a:visited img.thumb-border {border: solid #003399 1px}


My css is located here
My website is http://www.dolderen.com

Any help or even hints woud be appreciated.
Thanks a lot.
Frans :?
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

I thought it had to be in the order of "1px solid <color>" for the generic border property. I am actually rather sure of this. Okay.

You would need to set the classes of the thumnail images to be class="thumb-border".

Alternatively, you could use this CSS code:
Code: [ Select ]
.thumbs a:link img { border: 1px solid blue; }
.thumbs a:visited img { border: 1px solid purple; }
.thumbs a:hover img { border: 1px solid red; }
  1. .thumbs a:link img { border: 1px solid blue; }
  2. .thumbs a:visited img { border: 1px solid purple; }
  3. .thumbs a:hover img { border: 1px solid red; }


And then have the container element of your thumbnails use class="thumbs".
  • criserb
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Romania

Post 3+ Months Ago

Look, down is the css style:

Code: [ Select ]
.ImgBorder {
    border: 1px solid #990000;
}
.ImgBorder:hover {
    border: 3px solid #990000;
}
  1. .ImgBorder {
  2.     border: 1px solid #990000;
  3. }
  4. .ImgBorder:hover {
  5.     border: 3px solid #990000;
  6. }


and down are the script from the page:

Code: [ Select ]
<a href="index.php" class="ImgBorder"><img src="img/butt1.gif" ></a>
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

Sam, order doesn't matter for CSS, as long as all the elements you want specified are there. Granted I do it the same way as you, I know it can be done other ways.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 28 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.