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;
}