Hi guys and gals,
:write: Been awhile since i posted here so first off need to say hi to all! waves
…now down to business!
I’m having a bit of an issue making a pure html/css gallery.
I have created a gallery that works but its based upon individual classes for every image within my gallery. As you can imagine that’s going to lead to one long css file. To achieve that i was using this code.
a.Rowface { display: block; width: 310px; height: 200px; background: transparent url(Face.jpg) no-repeat; }
a.Rowface:hover { background-position: -310px 0; }
a.Row2dra { display: block; width: 630px; height: 200px; background: transparent url(Dragon.jpg); }
a.Row2dra:hover { background-position: -630px 0; }
As you can see its dead simple here just requires a class per image in order to set the hover. (1 image contains both hover states)
Now I’m trying to create a “generic” hover class, so its one class for all my images on the page, easy to reference cuts down on code etc
So Here’s where the problem lies… I’ve set my “generic” css which works to a certain extent but I’m having problems with my boarders. Now I can’t figure out how to word it effectively so I’ve attached 3 files in the .zip attached. The style sheet (obviously). “home.html” a working version with multiple classes and then “work.html” the problematic version.
Hopefully someone can help me along with this, I’ve been trying to look at other gallery’s and many seem to involve some sort of “Js” I’ve not yet come across one which is pure CSS.
Thanks for any help/insight.
Regards
Spencer
