3 effets de survol de l'image CSS3 cool

Sur le Web moderne, de nombreuses techniques peuvent être utilisées pour créer des interactions intéressantes, mais les plus simples et les plus élégantes sont généralement les CSS, et plus particulièrement les ajouts fournis avec CSS3.

Auparavant, nous devions utiliser JavaScript pour ce type d'effet, mais grâce à la prise en charge croissante de CSS3 sur tous les navigateurs, il est désormais possible de configurer des effets comme ceux-ci sans aucun script. Il existe malheureusement encore des navigateurs (IE9 et versions ultérieures) qui ne prennent pas en charge CSS3. Vous avez donc besoin d’une solution de rechange pour les navigateurs existants ou d’un traitement progressif.

Aujourd'hui, nous allons voir comment appliquer des effets de vol stationnaire sympas mais nets pour afficher et masquer les légendes des images.

Si vous préférez suivre avec le code, vous pouvez téléchargez les fichiers ici.

Démo 1

La première démo est la plus simple: l'image volera à sa droite pour révéler la légende.

Le balisage

Pour le HTML de notre deuxième démo, nous utiliserons un balisage très similaire à notre première démo. Mais cette fois, nous utiliserons demo-2 comme classe et ajouterons la classe zéro :

This is a cool title!
Lorem ipsum dolor sit amet.

Le CSS

Notre CSS sera presque la même que la première démo, sauf que cette fois, nous déplacerons notre image vers le bas par les paramètres de la propriété en bas à -96px. Nous allons également utiliser la transition de CSS3 pour créer un effet fluide:

.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}

Démo 3

Pour notre dernière démo, nous allons créer un effet de carte retournable. Cela signifie que lorsque vous passez votre souris sur l’image, elle la fait tourner sur son axe pour révéler la description.