Image border hover won't work - html

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">
<img src="10Pimg.png" alt="10img" style="width:900px; height:200px">
</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

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.

Answer 4

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">
<img src="http://dummyimage.com/900x200/000/fff" alt="10img" style="width:900px; height:200px" />
</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/