photo link dimming

[DLim98]

Hey guys I just had a quick question about making a image link dim when you hover over it with a mouse. An example of what I'm talking about is on http://bsphoto.squarespace.com/ Thanks so much for you help!

David

 

[Photomax]

The old way of doing this was with swapping images with javascript.

The better way is using CSS with a different colors in the a:link hover state.

Of course some kids like the new delayed reaction with mootools or jquery javascript function: what is old is new again...

Max

 

[SrWebDeveloper]

@OP:

Please visit this link for downloading all necessary code and viewing a fantastic demo link which uses JQuery, a popular framework that extends Javascript for rich web 2.0 effects but meets DOM standards. This method can be used for image or link fading with transitional effects on hover.

I use JQuery, it's amazing, and uses very little resources. You'll love it.

-jim

 

[angelwatt]

A quick way to do it, is to adjust the opacity of the link, though this will only dim if the background color behind it is dark, like on the linked page.

a.dim:hover {
 opacity: .7;
 filter: alpha(opacity=70); /* for dumb IE */
}

The above CSS assumes that the links you want this to occur on have a class with the name 'dim.'

 

[DLim98]

Thank you so much. This help me out a lot. Just another question is there any way to make it black and white when you hover over it?

 

[angelwatt]

Thank you so much. This help me out a lot. Just another question is there any way to make it black and white when you hover over it?

Not sure what you mean by make it black and white.

 

[DLim98]

To clarify I was just wondering if there was a way to make the picture turn from a color image to a black/white image when you hover the mouse over it.

 

[angelwatt]

To clarify I was just wondering if there was a way to make the picture turn from a color image to a black/white image when you hover the mouse over it.

Ah, gotcha, a color to black and white transform. If you're wanting to create the B&W image on-the-fly, that would take using Flash or a PHP (or other server language) image library to process the image. JavaScript and CSS can't do that complex of a transformation.

Here's some starter reading on using the GD library for PHP to do such a transform, though it doesn't go into how you would integrate this into a hover effect. It's probably not worth the effort though.

The alternative, and more simpler approach, would be to create both the color and black and white versions of the image, and then use CSS and/or JavaScript to swap the images out on hover. Here's a simple example for doing so with CSS alone. And then here's an example using JavaScript. I'd try to go for the CSS one if you can.

 

[DLim98]

Thats awesome! Thank you so much. I have a link title along with the image and right now it is reacting the same way as the image (as its coded), but I was wondering if there was anyway I could change that. I wanted to get the link title to appear when hovered if that makes sense. The example is in the link that I added in the first post. I apologize for all the questions. I'm really new at website development.

 

[DLim98]

Nevermind I have figured out how to do a caption that changes color when I hover over the caption, but when I hover the image the caption doesn't react. Hovering over the caption causes the image to react though which is the interesting thing. http://davidlim.squarespace.com/photos is what it looks like right now. Thanks guys for your help.

 

[angelwatt]

I reworked your HTML and CSS to make a better setup. Some of your HTML was invalid the way you were trying to use it. For those images you had the HTML as:

<td><a class="dim" href="/Graduation/"> <img title="Graduation" src="http://farm4.static.flickr.com/3005/2617242016_bc4a79cf07.jpg" alt="" width="261">
<p class="caption">Graduation</p>
</a></td>

You can't have a p tag inside a anchor (link) tag though. It's invalid. What you should have is,

<td><p class="caption"><a class="dim" href="/mooreland08/"> <img title="Mooreland" src="http://farm4.static.flickr.com/3201/2761880537_d46e90924b.jpg" alt="" width="261">
Mooreland
</a></p></td>

Then you can change your CSS to achieve the effect you want more easily.

a.dim:hover {
 opacity: .7;
 filter: alpha(opacity=70); /* for IE */
 color: #FFFFFF;
}
.caption a {
 color: transparent; /* or set to background color of page */
}
.caption:hover {
 color: #FFFFFF;
}

I got rid of some of the opacity lines as they weren't needed. You can simply change the color of the link text so it doesn't appear visually. Here I'm using transparent as the color. Some browsers don't handle this very well so you are better off changing it to the color of the background of the page.

 

[DLim98]

Thank you for helping me with my coding. The problem now seems to be when I use the html code that you shared with me. The image is also transparent if I don't hover. Is what I'm wanting possible in html? To have a caption and image that react differently but are still connected? I have the first link with your html code as an example.

 

[angelwatt]

Thank you for helping me with my coding. The problem now seems to be when I use the html code that you shared with me. The image is also transparent if I don't hover. Is what I'm wanting possible in html? To have a caption and image that react differently but are still connected? I have the first link with your html code as an example.

You changed the HTML, but you didn't change the CSS I provided. Currently in your common.css file there's a segment with the following CSS:

/* Added by David ----------------------------*/
a.dim:hover {
 opacity: .7;
 filter: alpha(opacity=70); /* for IE */
color: #FFFFFF;
}

.caption {
 opacity: 0; 
 filter: alpha(opacity=0);
 color: #262626
}

.caption:hover {
 opacity: 1; 
 filter: alpha(opacity=100);
 color: #FFFFFF;
}

This CSS needs to be changed to match what I provided in my previous post for things to work, otherwise you'll only see what you currently see.

 

[DLim98]

That did it! Now for one last question is there a way to make the opacity for the text to not change. Right now when I hover, it makes the text appear but the opacity change for the picture is being applied to the caption too.

 

[angelwatt]

That did it! Now for one last question is there a way to make the opacity for the text to not change. Right now when I hover, it makes the text appear but the opacity change for the picture is being applied to the caption too.

Sure, that's just a little tweaking to the first and last CSS selector and also removed an unnecessary line, which will give you,

a.dim:hover img {
 opacity: .7;
 filter: alpha(opacity=70); /* for IE */
}
.caption a {
 color: #262626
}
.caption a:hover {
 color: #FFFFFF;
}