Background révélé par des images coulissantes en CSS

Encore un tutoriel sympa de Dudley Storey : créez des images coulissantes révélant un background, en pur CSS, grâce à clip-path et transform / translate. Un effet simple, construit astucieusement comme toujours!

Par

D’une manière générale, il est préférable de ne pas toucher à l’intégrité d’une photographie mais il est possible de partager une image pour révéler un contenu caché. La plupart des méthodes utilisent deux images, mais nous allons voir qu’il est bien plus efficace de le faire en utilisant CSS :

Born To Run
Une route qui ne va nulle part La même route

Ma version utilise deux copies de la même image — ce qui a peu d’impact sur le temps de chargement car les navigateurs ont l’intelligence de mettre une copie en mémoire cache et de l’utiliser lorsqu’on fait appel à elle à nouveau.

<figure>
  <figcaption>Born To Run</figcaption>
  <img src="road-to-nowhere.jpg" alt>
  <img src="road-to-nowhere.jpg" alt>
</figure>

L’élément <figure> et son contenu textuel sont mis à l’échelle pour être parfaitement ajustés par rapport au viewport grâce aux unités vw :

figure {
  position: relative;
  width: 60vw;
  height: 60vw;
  overflow: hidden;
  background-image: url(mad-dog.jpg);
  background-size: cover;
}

figcaption {
  position: absolute;
  top: 0;
  padding-top: 12vw;
  font-size: 10vw;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
}

Les deux images sont placées à l’intérieur de <figure> :

figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: 2s ease-in-out;
}

Puis chacune est divisée en deux avec clip-path :

figure img:first-of-type {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

figure img:last-of-type {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

Et au survol, chaque moitié est animée : l’excédent est caché grâce à overflow: hidden sur l’élément <figure> :

figure:hover img:first-of-type {
  transform: translateY(-45%);
}

figure:hover img:last-of-type {
  transform: translateY(45%);
}

L’effet de découpage (actuellement supporté en CSS via Webkit) est recréé dans Firefox et autres navigateurs en utilisant SVG, une technique dont j’ai parlé précédemment (dans l’article Combiner CSS clip-path et Shapes)


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.


Du même auteur dans La Cascade :

Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Les bases de SVG : Polygones
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original mis à jour le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.