Trying to fade in overlay

CSS3 Transitions

by Jonah M

HTML

<p>
Image Loading...
</p>

<div class="item">

  <img src="http://loremflickr.com/400/200/dog" class="image">
  <a class="overlay" href="#">
    <h3 class="title">Some title</h3>
    <div class="description">
      <h4>
                                Lorem ipsum dolor sit amet, <br>
                                consectetur adipisicing elit.
                            </h4>
    </div>
  </a>

</div>

<p>
      I want to fade in this overlay. I'm trying to do it from .item
</p>

CSS

.item {
  float: left;
  position: relative;
  line-height: 1em;
  height: auto;
  margin-bottom: 28px;
  border: solid 1px grey;

  /*Transition stuff */ 
    -webkit-transition: all .3s ease-in .15s;
    -moz-transition: all .3s ease-in .15s;
    -o-transition: all .3s ease-in .15s;
    -ms-transition: all .3s ease-in .15s;
    transition: all .3s ease-in-out .15s;
}

/*---- I hover over the item to then display the .overlay ----*/
.item:hover .overlay {
  display: block;
  background-color: black;
}

.overlay {
  width: 100%;
  height: 100%;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  color: #fff;
  display: none; /*Is this causing problems? */
  visibility: none;
}




/*---- Extra Styling ----*/
.image {
    max-width: 100%;
    margin: 0;
    display: block;
}

.image:after {
    clear: both;
}

.overlay h3 {
  text-align: left;
  color: white;
  font-weight: 700;
  padding: 15px;
}

.overlay h4 {
  color: white;
  text-align: left;
    padding: 15px;
}

JavaScript

http: //loremflickr.com/320/240/dog