CSS border on image thumbnails affects all images on page

Question

So I am creating a gallery using Lightbox2. I put all the images in "div class="container" then enter code hereI used CSS to add a border around the thumbnail of the photo. I gave it properties for static and when hovered over.

Here's the HTML I used to set up Lightbox2:

<a href="images/work/cardrawing.jpg" data-lightbox="drawing" title="subaru drawing"><img src="images/work/thumbnails/cardrawing_thumb.jpg" /></a>

It worked fine. I then added the following code to the bottom of the "lightbox.css" file to give it specific properties:

a img{border:5px solid #cccccc;} a:hover img{border:5px solid #0b6f8a;}

This also worked great, however, it affected all other images on my site that have an anchored link or anything. Almost every image in general. Whats the best way to categorize everything as to only affect certain images?

Answer 1

You should use ID's or classes. Have specific img tags set up so it's like:

<a href="images/work/cardrawing.jpg" data-lightbox="drawing" title="subaru drawing">
    <img class="hoverImage" src="images/work/thumbnails/cardrawing_thumb.jpg" />
</a>

and then in your CSS you can use:

a img.hoverImage{
    border:5px solid #cccccc;
} 
a img.hoverImage:hover{
    border:5px solid #0b6f8a;
}

You can then set specific properties/hovers for each image if necessary.

Answer 2

You need to be more specific with your CSS. Your images have the class lightbox.

<a...><img class="lighbox" ... /></a>

so you would use

a img.lighbox{...}

and

a img.lighbox:hover{...}

Answer 3

You need to target the images by class

Html:

<a href="images/work/cardrawing.jpg" data-lightbox="drawing" title="subaru drawing">
    <img class="lightbox" src="images/work/thumbnails/cardrawing_thumb.jpg" />
</a>

CSS:

img.lightbox { 
    border:5px solid #cccccc; 
} 

a img.lightbox:hover { 
    border:5px solid #0b6f8a; 
}