Center text in image and change text colour on hover - html

Question

I'm trying to center text within the image and have the text change colour on hover.
However the divider between the text keeps knocking out the grid and I cant get the a:hover function to work? Thanks for helping.
This is what I am trying to achieve,
http://tinypic.com/view.php?pic=az791h&s=8#.U4i1MfldUrU
http://jsfiddle.net/pR8C4/
enter code here
<div id="gallery">
<ul>
<li>
<div class="gallery-image">
<a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
<p class="gallery-desc">top title</p>
<div class="line-separator-three"></div>
<p class="gallery-desc-bottom">bottom title</p></a>
</div>
</li>
<li>
<div class="gallery-image">
<a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
<p></p></a>
</div>
</li>
<li>
<div class="gallery-image">
<img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
</div>
</li>
<li>
<div class="gallery-image">
<img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
</div>
</li>
<li>
<div class="gallery-image">
<img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
</div>
</li>
<li>
<div class="gallery-image">
<img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
</div>
</li>
<li>
<div class="gallery-image">
<img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
</div>
</li>
<li>
<div class="gallery-image">
<img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
</div>
</li>
<li>
<div class="gallery-image">
<img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
</div>
</li>
</ul>
</div>
enter code here
#gallery {
width:100%;
margin-right:auto;
margin-left:auto;
margin-top:45px;
position:relative;
-webkit-transform: translateZ(0);
}
#gallery ul {
list-style:none;
margin:0;
padding:0;
}
#gallery ul li {
overflow:hidden;
width: 30%;
margin:1.66%;
float:left;
}
#gallery li a {
position:relative;
display:block;
}
#gallery ul p {
position:absolute;
z-index:2;
padding-left:20%;
top:33%;
font-size:1.5em;
font-family:'avenir';
text-align:center;
}
#gallery ul a {
color:#fff;
}
.gallery li a:hover{
color:#FF8000;
}
#gallery ul img {
position: relative;
z-index:1;
width: 100%;
}
.line-separator-three{
width:50%;
margin-left:25%;
height:1px;
background:#F5F5F5;
border-bottom:1px solid #F5F5F5;
margin-top:20px;
margin-bottom:20px;
position:absolute;
z-index:3;
}
enter code here

Answer 1

For the :hover effect you just have to change the class-selector .gallery li a:hover into an id-selector #gallery li a:hover.