Question

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:

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

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 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?

Answer 1

Check out my fork of your jsFiddle. Is this what you’re looking for? Basically, instead of making adjustments to the opacity, use display:none on the regular .img-overlay css, then change to display:block on :hover. Does this work on your site? I also made @Giacomo1968’s suggested edits regarding your unclosed ui tag, assuming you meant ul.

Also, why is this line in here?

text-indent:-9000px;

I commented that out and everything looks great in the updated jsFiddle. Let me know if that fixes things on your end.