.contain {
	width:500px;
	height:500px;
	display: block;
	position:relative;
	float:left;
	margin-right:20px;
	margin-top: 20px;
	border-style: solid;
	border-width: 1px;
}

.image {
	display: block;
	width: 100%;
	height: 100%;
}

.overlay {
 	position:absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	height: 100%;
  	width: 100%;
  	opacity: 0;
  	transition: opacity .5s ease;
  	background-color: black;
}

.contain:hover .overlay {
	opacity: .8;
	transition: opacity .5s;
}



.text {
 	color: white;
  	font-size: 20px;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	text-align: center;
}