Edit in JSFiddle

* {
    margin: 0;
    padding: 0;
}

.caja {
	width: 500px;
	height: 400px;
	border: 3px solid silver;
	position: absolute;
	top: 60px;
	left: 200px;
	overflow: hidden;
}
    
.ficha {
	width: 300px;
    position: relative;
    right: -420px;
    transition: right .5s ease;
	font: 24px Arial;
	color: gray;
}

.cami {
    top: 50px;
}

.vest {
	top: 60px;
}

.toca {
	top: 70px;
}

.ficha:hover {
    right: -230px;
}

p {
    padding: 20px;
    background: rgba(255,0,0,.5);
	color: white;
	letter-spacing: .2em;
}

span {
    padding: 20px;
    background: blue;
    color: #fff;
}

p, span {
    float: left;
}

	<div class="caja">
		<div class="ficha cami">
			<span>Abrir</span>
			<p>Camisetas</p>
		</div>
		<div class="ficha vest">
			<span>Abrir</span>
			<p>Vestidos</p>
		</div>
		<div class="ficha toca">
			<span>Abrir</span>
			<p>Tocados</p>
		</div>
	</div>