Image border hover won't work

Question

I have an image centered on the screen that I would like a border around, which when hovered over changes color. I am trying to do this as you can see in the code below, but the problem is that the image just keeps being a link but no border, what is wrong?

html code:

<div id="container">

    <div id="content">

        <div class="10Img">
            <a href=""><img src="10Pimg.png" alt="10img" style="width:900px; height:200px"></a>
        </div>

    </div>


    </div>

css code:

#content{
    padding-bottom: 200px;
    position: absolute;
    float: left;
    left: 50%;
    margin-left: -450px;
    top: 200px;
}

#container{
    height:100%;
}

.10Img{
    border: 2px solid grey;
}

.10Img a:hover{
    outline: 2px solid black;
}

Answer 1

The main issue is you are starting your class name with a numerical character change 10Img and start it with an alphabetic character. Ex. i change it from 10Img to aImg

Then you can use

.aImg  img {
 border: 2px solid grey;
}

or only

.aImg {
     border: 2px solid grey;
    }

Answer 2

Try this: Demo

a img {
    border: 2px solid grey;
}
a img:hover {
    border: 2px solid black;
}

Answer 3

Your css class 10Img doesn't work, because css class names must not begin with a number, see:

Which characters are valid in CSS class names/selectors?

So if you call your class Img10 instead of 10Img it should work.

<div id="container">
    <div id="content">
        <div class="Img10">
            <a href=""><img src="http://dummyimage.com/900x200/000/fff" alt="10img" style="width:900px; height:200px" /></a>
        </div>
    </div>
</div>

Also you may want to have the :hover border on the div instead on the a:

#content{
    padding-bottom: 200px;
    position: absolute;
    float: left;
    left: 50%;
    margin-left: -450px;
    top: 200px;
}

#container{
    height:100%;
}

.Img10{
    border: 2px solid grey;
}

.Img10:hover{
    outline: 2px solid black;
}

Here is a working fiddle: http://jsfiddle.net/k2Ld7yfe/

Answer 4

See This Demo

.Img{border: 2px solid grey;}
.Img a:hover{
outline: 2px solid black;}

Note: Class Name can not start with integer.

Refer This for Rules regarding naming.