I've been working on implementing this code snippet into my website, but for some reason it's not displaying correctly. I'm using the exact same code that's available on this fiddle: http://jsfiddle.net/2tPGy/3/
Here's the HTML:
<ul class="projectGrid align">
<li id="project-1">
<a href="#">
<div class="img-overlay">
<h4>Title</h4>
<p>A description of the image</p>
</div>
</a>
</li>
</ul>
And here's the CSS:
.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);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
#project-1 a {
background: url('../images/1.png') no-repeat scroll;
background-size: 280px 280px;
}
The code functions properly on the fiddle, however when implemented on my website, the text within the div is not visible. Any suggestions on what might be causing this issue?