Les effets Css de transition n'ont pas fini de nous surprendre. Le résultat illustré par la capture le démontre.
Origine et organisation des calques pour un fondu contrôlé
Le fichier de la page Web se nomme index.html. Ses ressources l'accompagnent dans les sous dossiers. Deux photos sont disposées côte à côte.Mais pour l'instant bien sûr, au survol de la souris aucune transition en fondu n'est à observer. Elles sont toutes deux stockées dans le sous dossier local css.
La première gère l'organisation globale ainsi que l'aspect des éléments Html de la page. La seconde est celle qui nous intéresse pour donner vie à ces effets de fondu. Plus bas dans le code, vous notez la construction Html permettant la superposition des images. Les images sont intégrées dans deux calques gérés par la même classe nommée fondu. On compte deux images par calque, soit quatre au total. Pourtant, au chargement de la page Web, seules deux sont visibles. Celle du dessous affectée à la classe nommée haut cache celle du dessus affectée à la classe nommée bas. Vous l'avez compris, celle située en dessous dans la construction Html est affichée au-dessus sur la page Web.
Deux styles existent déjà. Le style fondu se charge des réglages des calques hébergeant les images. Ils sont donc déclarés en position relative et sont flottants (float:left). C'est ainsi que nous avons pu les disposer l'un à côté de l'autre. Les styles bas et haut concernent les images comme nous avons pu le constater. Elles sont déclarées en position absolue (position:absolute) à l'intérieur de ces calques. C'est grâce à ce réglage que les images se chevauchent et que celle du dessus masque celle du dessous.
Configuration de l’effet: transitions et opacité
Nous désignons donc le nom de la classe des calques conteneurs (fondu) suivi de l'élément html img. Nous initialisons l'effet avec l'attribut transition et nous lui passons trois paramètres. Le premier indique que la transformation doit avoir lieu sur l'opacité de l'image (opacity) concernée. Le deuxième fixe la durée de cette animation sur deux secondes. Désormais, pour que cette animation se joue au survol de la souris, nous devons indiquer l'état d'arrivée de l'image concernée. Il s'agit des deux photos associées au style haut, soit celles qui sont situées au-dessus des deux autres. La technique est similaire à la précédente. Nous ciblons uniquement les images associées au style haut dans les calques affectés au style fondu, mais aussi et surtout au survol de la souris (hover).
Comme la transition est réglée pour les images de ce calque et que l'état d'arrivée est défini au survol sur certaines images de ce calque, nous allons pouvoir déclencher l'effet escompté. Avec l'opacité réglée à zéro, l'image devient complètement transparente pour laisser progressivement sa place à celle du dessous. Comme vous pouvez l'apprécier, l'effet de fondu a été réalisé avec succès.
Approche pédagogique et overlay: notions et méthodes
Bonjour,Voici un tutoriel très simple pour apprendre le fonctionnement des overlay en HTML et CSS uniquement.En effet, qui n’a jamais eu envie de superposer rapidement un texte sur une image ? Puis de le modifier au passage de la souris où même d’afficher une image alternative ?Le code fourni dans cet article peut s’appliquer à n’importe quel site. Il suffit d’intégrer le code HTML sur une page et le code CSS dans votre fichier de style.On trouve différentes façons de la faire sur le net, mais j’ai voulu synthétiser tout ce que j’ai trouvé pour en extraire une solution minimale, et surtout propre.
Présentation de l’overlay sur une imageUn overlay, c’est simplement la superposition d’une couche sur une autre, par exemple deux divs.
Langage du code : JavaScript (javascript)Code CSS : apparition de l’overlay sur le « hover »Le code ci-dessous est à intégrer dans la définition de vos styles :fichier style.css inclus par votre fichier HTML si vous travaillez en HTML directement,fichier style.css de votre thème enfant si vous travaillez avec WordPress,ou encore dans les options d’une page Divi si le mécanisme n’est utilisé qu’à un endroit précis.
Affichage de l’overlay texte originalLa classe .overlay-image permet de paramétrer le conteneur global dans le cas d’une page sans constructeur. Par exemple dans cet article j’ai remplacé le « width: 100%; » par « width: 80% margin: auto; ».Remarque importante : Le conteneur .image-overlay DOIT être « positioné » en relatif afin de pouvoir positionner à leur tour les éléments qu’il contient.Image et texte originaux sont définis par .overlay-image .image et .overlay-image .text :l’image prend toute la place disponible,le texte est centré sur l’image en utilisant un « positionnement » absolu sur le block conteneur et une translation (un classique).
Affichage du nouvel overlay au survol de la sourisL’overlay est matérialisé par .overlay-image .hover, « positionné » en absolu pour occuper toute la surface du conteneur comprenant image et texte originaux (largeur et hauteur à 100%).Lors du passage de la souris, son opacité passe de 0 à 1 avec une transition douce afin de le faire apparaître par-dessus le div original.
Techniques et options pour overlays sur WordPress et HTML
Pour une superposition au survol de texte uniquement (donc sans image), il faut au préalable masquer le texte original car la nouvelle image n’est pas là pour le faire.Le codeJ’ai essayé de factoriser le code pour le rendre simple, lisible, compact et facilement réutilisable. Première base de départ, un lien avec dedans une image et un texte dans une span.
Pour réserver l’effet à certains éléments, on va rendre plus spécifiques les liens en ajoutant une class. Acte 1 Pour mon dernier portfolio (graphiste) , je voulais créer une interface avec GSAP et de la typographie animée. Après quelques expérimentations, le résultat n’était pas assez fluide, je suis donc passé à un site 100% canvas (la balise HTML) en utilisant les librairies PixiJS et GSAP. Quelques changements modernes à customiser selon vos projets.
Avec les events javascript vous pouvez utiliser onmouseover et onmouseout. Cette methode marche bien (je m'en sert pour mes menus) mais quelq'un ma dit sur ce forum que 10% des utilisateurs n'ont pas le javascript activé (surtout les entreprises). c'est dommage quand même pour l'accessibilité.
Utilisations et considérations
Appel à tous les webmasters !Gagnez du temps et boostez votre productivité avec WP Media Folder. Organisez sans effort les fichiers multimédias des clients, créez des galeries personnalisées et offrez une expérience utilisateur fluide.Mettez à niveau vos projets de site web maintenant !
Ce qui importe, c'est que l'effet de fondu via opacity sur hover est correctement déclenché pour les calques haut et bas, et que les images se chevauchent comme prévu grâce à position: absolute à l'intérieur des conteneurs fondu.
Tutoriel jQuery : Afficher du texte au survol d'une image
Tableau et paramètres comparables
Table des matières et méthodes variées existent pour WordPress et CSS; ci-dessous, les points clés ne citent pas de chiffres non présents dans le texte d'origine.