@charset "UTF-8";

.squarebox {
	width: 500px;
		height:500px;
		margin:0 auto;
	border: 1px solid gray;
	position:relative;
	overflow: hidden;
}
.slider {
	position: absolute;
	left:-80px;
	transition: all .4s ease-out;
	z-index: 0;
}
.squarebox:hover > .slider {
	left:0px;
	
}
.text{
	position:relative;
	text-align: center;
	top:170px;
	font-size: 45px;
	color:white;
	padding:30px;
	opacity: 0;
	letter-spacing: 0px;
	background-color: rgba(128,128,128,1.00);
	transition: all .5s ease-out;
	
	
}
.squarebox:hover > .text{
	opacity: 1;
	letter-spacing: 10px;
	top:140px;
}