Unable to display text overlay using css

[Rocket]

I think I am close, but I don't know what am missing.I am using the same code as is on this fiddle:http://jsfiddle.net/2tPGy/3/HTML:\[code\] <ul class="projectGrid align"> <li id="project-1"> <a href="http://stackoverflow.com/questions/14540893/#"> <div class="img-overlay"> <h4>Title</h4> <p>A description of the image</p> </div> </a> </li> </ul>\[/code\]CSS:\[code\] .projectGrid li { display: inline-block; margin: 0 20px 20px; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); opacity:0.7; border-radius: 11px; -moz-border-radius: 11px; -webkit-border-radius: 11px; text-indent: -9000px;-webkit-transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out;-moz-transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out;-o-transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out;-ms-transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out; transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out; } .projectGrid li a { display: block; width: 280px; height: 280px; background-color: grey; border: solid; border-radius: 11px; -moz-border-radius: 11px; -webkit-border-radius: 11px; } .projectGrid li:hover { box-shadow: 0px 0px 8px rgba(0,0,0,0.7); opacity:1.0; } #project-1 { height:286px; overflow:hidden; position:relative; width:286px; }.img-overlay { background-color:#000; bottom:0; color:#fff; opacity:0; filter: alpha(opacity=0); position:absolute; width:100%; z-index:1000;}#project-1:hover .img-overlay { opacity:0.75; filter: alpha(opacity=75); transitionpacity 0.25s; -moz-transitionpacity 0.25s; -webkit-transitionpacity 0.25s;}#project-1 a { background: url('../images/1.png') no-repeat scroll; background-size: 280px 280px;}\[/code\]The code works on the fiddle, but does not work on my website.The text in the div does not show up on my website.Can anyone guide me as to why this might be happening?