5 replies [Last post]
Alan
Offline
Enthusiast
Last seen: 18 years 14 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Hi there,

On this page, the borders around the images light up, when you move your mouse over them:

http://www.pbase.com/tineke/people_all_around&page=3

Does anyone know how this effect can be achieved, using CSS?

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 8 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

MouseOver Image Border

They are using;

a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
        border: rgb(0, 0, 0) 1px solid;
        margin-bottom: -45px;
        padding-top: 5px;
        width: 172px;
        display: block;
        background: rgb(35, 35, 35);
        height: 197px;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
}
a.td.thumbnail:hover            {
        border: rgb(95, 121, 216) 1px solid;
        margin-bottom: -45px;
        padding-top: 5px;
        width: 172px;
        display: block;
        background: rgb(32, 32, 32);
        height: 197px;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

I believe only IE will see that filter effect.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

F5
Offline
Regular
Houston, Tx.
Last seen: 17 years 35 weeks ago
Houston, Tx.
Timezone: GMT+6
Joined: 2004-05-28
Posts: 12
Points: 0

MouseOver Image Border

yeah only IE will be able to see the effect. You cold make it cross-browser/ cross-platform with a little planning...

Basically you'd create two images, a darkened image (low opacity), and a brighter image (no opacity). Then just fix the height and width of your anchor tag that is supposed to surround the image. Instead of placing the image inside the anchor tag, you would just define the background with the dark thumbnail image, and define the hover with the lighter image, while hiding the contents within the anchor.

...of course, if you were pulling the image info from a DB, then it wouldn't work, but static, you should be fine.

I believe www.alistapart.com has all the articles (peicemeal) you' dneed to help you create this css. Try searching for "FIR" (Fahrner Image Replacement) and using .png files, as well as how to hide css from various browsers (aka "hacking")

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

MouseOver Image Border

There is a way to do the effect on mozilla and firefox - look for moz-opacity.

Verschwindende wrote:
  • CSS doesn't make pies

Alan
Offline
Enthusiast
Last seen: 18 years 14 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

MouseOver Image Border

Sorry, I don't think I made my question clear enough.

All I'm interested in is how they make the border change colour, when you roll your mouse over the image. I'm not interested in the transparency effect used to dim the image.

How can the border effect be achieved? And is it compatiable with most browsers?

F5
Offline
Regular
Houston, Tx.
Last seen: 17 years 35 weeks ago
Houston, Tx.
Timezone: GMT+6
Joined: 2004-05-28
Posts: 12
Points: 0

MouseOver Image Border

yes, it's compatible with all browsers. The main element of the magic happening will be the :hover pseudo element. It should look something like this:

a.highlight {border: 0;}
a.highlight:hover {border: 1px solid #66F;}

HTML:

<a class="highlight" href="#">image or text</a>