/* Bloc principal */
.monBloc {
/* positionnement de référence */
position: relative;
/* cache tout ce qui dépasse du bloc */
overflow: hidden;
/* largeur du bloc */
width: 250px;
/* hauteur du bloc */
height: 150px;
/* couleur de fond */
background: #fff;
}
/* Bloc de recouvrement */
.blocVolet {
/* positionnement en haut à gauche de monBloc */
position: absolute;
top: 0;
left: 0;
/* largeur du bloc (identique au bloc principal) */
width: 100%;
/* hauteur du bloc (identique au bloc principal) */
height: 100%;
/* couleur de fond */
background: green;
/* réglage de la transition */
transition: all 1s linear;
/* On s'assure que ça recouvre bien tout */
z-index:50;
}
/* Changement au survol */
.monBloc:hover > .blocVolet {
/* le bloc se décalera vers la gauche de la largeur du bloc conteneur */
left: -100%;
}
Glissement à gauche
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Changement au survol */
.monBloc:hover > .blocVolet {
left: -100%;
}
Glissement à droite
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Changement au survol */
.monBloc:hover > .blocVolet {
left: 100%;
}
Glissement en bas
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Changement au survol */
.monBloc:hover > .blocVolet {
top: 100%;
}
Glissement en haut
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Changement au survol */
.monBloc:hover > .blocVolet {
top: -100%;
}
Glissement en haut à gauche
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Changement au survol */
.monBloc:hover > .blocVolet {
top: -100%;
left: -100%;
}
Glissement en haut à droite
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Changement au survol */
.monBloc:hover > .blocVolet {
top: -100%;
left: 100%;
}
Glissement en bas à gauche
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Changement au survol */
.monBloc:hover > .blocVolet {
top: 100%;
left: -100%;
}
Glissement en bas à droite
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Changement au survol */
.monBloc:hover > .blocVolet {
top: 100%;
left: 100%;
}
Disparition au centre
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Bloc de recouvrement */
.blocVolet {
...
transform: scale(1, 1);
}
/* Changement au survol */
.monBloc:hover > .blocVolet {
transform: scale(0, 0);
}
Disparition en fondu
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum enim animi rerum alias odio nemo quam corporis error quaerat quos et aliquid unde labore dolorem.
/* Bloc de recouvrement */
.blocVolet {
...
opacity:1;
}
/* Changement au survol */
.monBloc:hover > .blocVolet {
opacity:0;
}