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

/* 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 */
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  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) */
}

//========================================================
// 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);
}