<style>
.Slidebox{
float:center;
}
.cover {
position: relative;
width: 590px;
height: 282px;
margin: 20pxauto;
background-color: #f7f7f7;
z-index: 1;
padding: 10px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.left_gate{
position: absolute;
background: #DBDCDE;
bottom: 0; right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .left_gate{
right: 100%;
left: -50%;
}

.right_gate{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .right_gate{
left: 100%;
right: -50%;
}
.slide_in {
overflow: hidden;
}
.slide_in .left_gate {
background: url(картинка слева )#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(картинка справа )#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}
</style>

<br />
<div class="Slidebox">
<div class="cover slide_in">
<div class="left_gate">
</div>
<div class="right_gate">
</div>
Здесь ваш спрятанный текст.
</div>
</div>
</div>