Inner / Outer Border on Image Rollover Using CSS

**mastermind** · 11-22-2011, 06:51 PM

Inner / Outer Border on Image Rollover Using CSS

Code:

<html>
<head>
<style>
     .rolloverImageInBorder a img, .rolloverImageInBorder a { border: none; overflow: hidden; float: left; }
     .rolloverImageInBorder a:hover { border: 3px solid #009de8; }
     .rolloverImageInBorder a:hover img { margin: -3px; }
     .rolloverImageOutBorder a img, .rolloverImageOutBorder a { border: none; float: left; }
     .rolloverImageOutBorder a { margin: 3px; }
     .rolloverImageOutBorder a:hover { outline: 3px solid #009de8; }
 </style>
</head>
<body>

<div class="rolloverImageInBorder">
<a href="#"><img src="yourimagesource" alt="" /></a>
<a href="#"><img src="yourimagesource" alt="" /></a>
<a href="#"><img src="yourimagesource" alt="" /></a>
</div>
<div class="rolloverImageOutBorder">
<a href="#"><img src="yourimagesource" alt="" /></a>
<a href="#"><img src="yourimagesource" alt="" /></a>
<a href="#"><img src="yourimagesource" alt="" /></a>
</div>
 
</body>
</html>

**talks_44** · 01-06-2012, 02:00 AM

Hmm.. actually a useful little tip, hadn't thought about it like that... thanks for sharing this

Thread: Inner / Outer Border on Image Rollover Using CSS

Thread Tools

Display

Inner / Outer Border on Image Rollover Using CSS

Similar Threads

Top menu with rollover effects.

when i placed text within my page,it's right up against left border. Is there any way to correct this?

Can anyone make the link border disappear?

How to Change Quick Reply Border - Vbulletin 4

How can I make my table border look like this? please help

Tags for this Thread

Posting Permissions