Le HTML

Code:

<div class="monBloc">
 <div class="blocVolet"></div>
 Un peu de contenu (caché par le blocVolet (qui peut contenir du texte))
</div>

Le CSS

Code:

/* Bloc principal */
.monBloc {
  position: relative; /* important ! */
  overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
  width: 250px; /* largeur du bloc */
  height: 150px; /* hauteur du bloc */
  background: red; /* couleur de fond */
}

/* Bloc de recouvrement */
.blocVolet {
  position: absolute; /* positionnement absolu (important) */
  top: 0; /* (important) */
  left: 0; /* (important) */
  width: 250px; /* largeur du bloc (identique au bloc principal) */
  height: 150px; /* hauteur du bloc (identique au bloc principal) */
  background: green; /* couleur de fond */
  /* réglage de la transition */
  transition: all 1s linear;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
  left: -250px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */
}

Bonus spécial : le code LESS

Code:

//========================================================
// VARIABLES (à éditer à votre convenance)
//========================================================

@hauteurBloc:150px; // Hauteur du bloc
@largeurBloc:250px; // Largeur du bloc

// Type de transition lorsque le bloc "de cache" se retire
// valeurs possibles : Gauche, Droite, Haut, Bas, Central ou Diagonale
@deplaceDirection : Gauche;

// Si vous choisissez la direction Diagonale, vous pouvez préciser la direction
// Valeurs possibles : HautGauche, HautDroite, BasDroite et BasGauche
// Même si vous n'utilisez pas la direction Diagonale, laissez une valeur !
@sensDiagonale : HautDroite ;

// =======================================================
// MIXINS (ne pas toucher)
//========================================================

.glisseBloc (@motclef) when (@motclef = Droite) {
 left:@largeurBloc;
}

.glisseBloc (@motclef) when (@motclef = Gauche) {
 left:-@largeurBloc;
}
.glisseBloc (@motclef) when (@motclef = Bas) {
 top:@hauteurBloc;
}

.glisseBloc (@motclef) when (@motclef = Haut) {
 top:-@hauteurBloc;
}

.glisseBloc (@motclef) when (@motclef = Central) {
 .echelle(0);
}

.glisseBloc (@motclef) when (@motclef = Diagonale) {
 .glisseDiagonale (@sensDiagonale);
}

.pointDeDepart () when not (@deplaceDirection = Diagonale) and not (@deplaceDirection = Central ){
 top:0;
 left:0;
}

.pointDeDepart () when (@deplaceDirection = Central) {
 top:0;
 left:0;
 .echelle (1);
}

.pointDeDepart () when (@deplaceDirection = Diagonale) and (@sensDiagonale = HautGauche) {
 top:0;
 left:0;
}

.pointDeDepart () when (@deplaceDirection = Diagonale) and (@sensDiagonale = HautDroite) {
 top:0;
 right:0;
}

.pointDeDepart () when (@deplaceDirection = Diagonale) and (@sensDiagonale = BasGauche) {
 bottom:0;
 left:0;
}

.pointDeDepart () when (@deplaceDirection = Diagonale) and (@sensDiagonale = BasDroite) {
 bottom:0;
 right:0;
}

.glisseDiagonale (@motclef) when (@deplaceDirection = Diagonale) and (@motclef = HautGauche) {
 top:-@hauteurBloc;
 left:-@largeurBloc;
}

.glisseDiagonale (@motclef) when (@deplaceDirection = Diagonale) and (@motclef = HautDroite) {
 top:-@hauteurBloc;
 right:-@largeurBloc;
}

.glisseDiagonale (@motclef) when (@deplaceDirection = Diagonale) and (@motclef = BasGauche) {
 bottom:-@hauteurBloc;
 left:-@largeurBloc;
}

.glisseDiagonale (@motclef) when (@deplaceDirection = Diagonale) and (@motclef = BasDroite) {
 bottom:-@hauteurBloc;
 right:-@largeurBloc;
}



.transition (@string) {
 -webkit-transition: @string;
   -moz-transition: @string;
    -ms-transition: @string;
     -o-transition: @string;
        transition: @string;
}

.echelle (@valeur) {
 -webkit-transform: scale(@valeur, @valeur);
 -moz-transform: scale(@valeur, @valeur);
 -o-transform: scale(@valeur, @valeur);
 -ms-transform: scale(@valeur, @valeur);
 transform: scale(@valeur, @valeur);
}

//==========================================================
// LESS CODE
//==========================================================

/* Bloc principal */
.monBloc {
 position:relative;
 overflow:hidden;
 width:@largeurBloc;
 height:@hauteurBloc;
 background:red;
}

/* Bloc de recouvrement */
.blocVolet {
 position:absolute;
 width:@largeurBloc;
 height:@hauteurBloc;
 .pointDeDepart ();
 .transition (all 1s linear);
 background:green;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
 .glisseBloc (@deplaceDirection);
}