Exemples d’effets sur les hover

Voici des idées pour des transitions / animations sur des hover d’images :

Utiliser des clearer avec des pseudo-éléments

Pour afficher correctement des éléments après des flottants, on utilise souvent :

Côté html :

Côté css :

L’inconvénient c’est que ça surcharge la structure html des fichiers. Pour parer à ce souci, on peut utiliser des pseudo-elements :

Côté html :

Côté css :

Et comme souvent, on utilise plusieurs fois les clearer, on peut faire un mixin qu’on appelle à chaque besoin.

 

Déplacer un élément avec les transitions css3

Cas concret :

Sur un site, un menu fixed en haut de page avec des rubriques centrées. On souhaite que lorsqu’on scrolle, à partir d’un certain niveau, les catégories du menu passent à droite.

Admettons que les rubriques aient des styles associés :

On va définir une nouvelle classe pour les rubriques placées à droite avec les propriétés qui nous intéressent pour le déplacement :

En javascript maintenant, on va attribuer la nouvelle classe aux rubriques :

Et on retire la nouvelle classe, lorsqu’on remonte vers le haut.

Pour ajouter la transition et son bel effet, il faut ajouter la ligne suivante dans les propriétés du menu initial :

Ainsi, le passage entre les deux états se fera de manière fluide et élégante.