PDA

View Full Version : Generic hover image for links ?


Rob_Che
11-06-2008, 11:01 PM
Hello helpful people...

Can I have a class or span that would enable a rollover 'overlay'.
What I'm thinking is that all image links on my site would keep their background but would have another image (semi trans for example) appear on top when hovered ?

Make sense ?
What do we think ? :-D

Thanks
RC

Rob_Che
11-06-2008, 11:05 PM
ahhh.... I see how it's done here: http://www.lucashirata.com.br/ - with transparencies...

.job_thumb {
height:180px;
margin-bottom:0px;
overflow:hidden;
width:180px;
}

.job_thumb a {
opacity:0.2;
}

.job_thumb a:hover {
opacity:1;
}

http://www.w3schools.com/Css/css_image_transparency.asp

domedia
11-07-2008, 01:46 PM
Opacity gets inherited.. try looking into RGBa for future projects.
http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock/
Now that you've dabbled with CSS for a whlie, it's time to introduce you to the CSS gurus ;)

Rob_Che
11-07-2008, 04:51 PM
Now that you've dabbled with CSS for a whlie, it's time to introduce you to the CSS gurus ;)
Thank you Master.

Going back to my original post... Say I wanted a hover effect that:
Whe n the image is hovered over it has a generic gif of "zoom" that appears over the image (not instead of)...

Could I do that using <span> ?
I'll have a play I think and come back... :) i might even post my code ;-)

Cheers DoMedia.

coloeagle
11-07-2008, 05:21 PM
Rob, unless I'm not fully understanding you here. Couldn't you just use the a:hover in your css and have it display the overlay image?

domedia
11-07-2008, 06:26 PM
Rob just so we're on the same page, do you want to make an image of the normal and the hover state?

Rob_Che
11-07-2008, 07:03 PM
EDIT !!!

I've done it !!! I'm unstoppable ;-)
4 image hover effects using just 5 images... you dig ?

http://www.perfectpixels.biz/Span%20Hover/spanHover.htm

I'm going to buy me a beer.
Thanks for your help all...

Rob

domedia
11-07-2008, 07:56 PM
Works really weird in my browser.. you cannot use an specific ID more than one time on a page, it's unique.. the pictures are *cough* lovely :)

Rob_Che
11-07-2008, 08:00 PM
Changed to classes (just left over code, yawn)... still weird ?
Works fine in my FF & MSIE... :(

domedia
11-07-2008, 08:09 PM
Works great!

Rob_Che
11-07-2008, 08:13 PM
YAY!
Am I allowed to be proud of myself?

I'm chuffed that I sorted it with minmal help (only because you didn't have a clue what I was talking about!? :))

Cheers DoMedia...
Rob