#grid-container {
 
  margin: auto;
  overflow: hidden;
}

.grid-item {
  opacity: 0;
  float: left;
  box-sizing: border-box;
  position:relative;
  border:1px solid black;
}

.grid-item img {
  width: 100%;
  height: 100%;
}


.grid-item.loaded {
  opacity: 1;
  transition: opacity .5s;
}

.grid-item:hover .cateTitleOvelay {
	
	position:absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.4);
}

.cateTitle{
	display:none;
}


.grid-item:hover .cateTitle{
	display:block;
	text-shadow: 1px 1px 2px black; 
	background: rgba(255,255,255,0.4) none repeat scroll 0 0;
    color: white;
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    left: 21%;
    padding: 24px 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 45%;
    width: 300px;
}