Slideshow full CSS3

   
Ceci est un tuto, optimal pour une PA, crée suite à la Demande d'SatoruMasao, ici.
Notez, en tant que petit disclaimer, que je ne sors pas tout ça de mon chapeau. Vous trouverez en lien le slideshow que j'ai prit en base, qui montrait comment ne pas utiliser les :target mais plutôt les input et label (ce qui évite de faire comme une "nouvelle page" et permet de cliquer sur le bouton de "précédent" du navigateur pour vraiment aller sur la page précédente et non pas l'id du slide précédent.




   

Le slideshow de base

Avant de commencer à s'amuser à mettre les petites bulles d'informations sur les personnages ou même quoi que ce soit d'autres, il faudrait tout d'abord commencer à créer le slideshow de base, c'est à dire, le conteneur, les slides (de simples div pour l'instant) et les flèches avec l'animation qui devrait y avoir.

Je vais aller étape par étape, mais tout de même montrer tout le HTML avant de montrer tout le CSS. Cependant, il est à noter que sans le CSS, le HTML risque d'être très moche (et surtout de ne rien faire!).

Le HTML

Alors, tout d'abord, commençons par le commencement!
Nous allons créer notre toute première div qui va contenir tous le slideshow. Vous pouvez l’appeler comme vous le voulez, mais ici, elle sera appelée "slideshow". Elle contiendra alors tout ce qui a un rapport avec le slider: les slides, les boutons pour aller d'un slide à l'autre, etc. Donc la voici:

Code:

<div id="slideshow">
</div>

C'est très simple n'est-ce pas?

Maintenant, nous allons rajouter des balises input de type radio. Ces balises, ce sont normalement ce qu'on utilise dans le formulaires, pour choisir une option ou une autre. Un exemple simple est sur ForumActif, plus précisément sur NeverUtopia: quand vous créez un sujet, sous "Icône de sujet" vous avez à côté de chaque icône un petit rond qu vous pouvez cocher. Eh bien c'est ça les input de type radio d'un formulaire!
Mais pourquoi utiliser ça, mais surtout, à quoi ça sert? Eh bien plutôt que d'utiliser des liens et d'utiliser ensuite le pseudo-élément :target, ici nous allons utiliser les input et leur pseudo-élément :checked, qui regarde si un input est coché ou non. Cela permet donc de ne pas ouvrir un "nouveau lien" à chaque slide, mais bel et bien de toujours avoir le même lien dans la barre de navigation.

Nous allons donc mettre autant d'input que nous voulons de slides, ici 5:

Code:


<input checked name="slideshow" id="slide1" type="radio" />
<input name="slideshow" id="slide2" type="radio" />
<input name="slideshow" id="slide3" type="radio" />
<input name="slideshow" id="slide4" type="radio" />
<input name="slideshow" id="slide5" type="radio" />

   

Pour rester dans le thème des input, parlons tout de suite comment et pourquoi ils seront utilisé: les flèches qui "contrôlent" le slideshow, et décident quel input est checked ou non. Pour cela, nous utilisons des labels.
On va d'ailleurs mettre ces labels dans un id que vous pouvez nommer comme vous le voulez mais que je nomme "controls". Cela nous permettra alors de placer les flèches et de faire certains effets dessus dans le CSS, mais aussi de les sélectionner correctement grâce au CSS (dont je parlerais plus tard)

Code:

<div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
</div>

Comme vous pouvez le constater, chaque slide a son propre label, et c'est l'attribut for qui dit pour quel label est chaque input. En effet, si vous cliquez sur un label qui est for un certain input, alors cet input sera coché. Je suppose donc que vous comprenez à présent un peu mieux comment ça marche: on clique sur une flèche qui est en fait un label pour un certain input d'un slide, et ce slide sera alors coché, ce qui permettra, grâce au CSS, à aller au slide correspondant!
Remarquez cependant que le for doit avoir le même nom que l'id de l'input correspondant.

Donc jusqu'à présent, on a ça:

Code:

<div id="slideshow">
 <input checked name="slideshow" id="slide1" type="radio" />
 <input name="slideshow" id="slide2" type="radio" />
 <input name="slideshow" id="slide3" type="radio" />
 <input name="slideshow" id="slide4" type="radio" />
 <input name="slideshow" id="slide5" type="radio" />
 <div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
 </div>
</div>

Ce n'est pour l'instant pas grand chose, cependant: c'est le plus important. en effet, bien que vous n'avez pas encore les slides à proprement parler, vous avez déjà la plus grosse partir du HTML, et ce qui va faire marcher tout le slideshow. Cependant, vu qu'un slideshow n'est rien sans slides, il nous faut les ajouter!

Nous allons donc créer une div qui va contenir tous nos slides, que l'on mettra entre les inputs et les controls (l'importance de ceci est expliquée plus tard) qui sera de la taille de tous les slides additionnés (que je nommerais inner), mais également un autre div, qui contiendra inner et qui permettra de cacher les slides en trop (à l'aide d'un overflow: hidden) de telle sorte à afficher un seul slide à la fois. Je le nommerais slides.
Nous avons donc ceci:

Code:

<div id="slides">
 <div class="inner">
 </div>
</div>

Je vais alors ajouter mes cinq slides dans inner, en leur donnant à chacun la classe a_slide (que vous pouvez appeler comme vous le voulez) qui me permettra de mettre la taille aux slides, mais aussi d'appliquer les effets nécessaires. J'ai donc ceci:

Code:

<div id="slides">
 <div class="inner">
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 </div>
</div>

À présent, pour que l'on puisse tout de suite tester les slides, j'ai mit dans chaque slide une image (le render) avec une class selon où je les veux positionnés, entourés d'un lien. En effet, je veux alterner entre le render à gauche et le render à droite, cependant, vous pouvez créer autan de positions que vous voulez (au milieu, un peu à droit,e un peu à gauche, etc), u même placer à l'aide d'id plutôt que de classe chaque image indépendamment. De même, vous pouvez mettre autre chose dans chaque slide qu'une image!

Code:

<div id="slides">
 <div class="inner">
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
 </div>
 </div>
</div>

Et voilà! Le HTML est terminé! En résumé, nous avons ceci (HTML complet pour l'étape du slideshow simple):

Code:

<div id="slideshow">
 <input checked name="slideshow" id="slide1" type="radio" />
 <input name="slideshow" id="slide2" type="radio" />
 <input name="slideshow" id="slide3" type="radio" />
 <input name="slideshow" id="slide4" type="radio" />
 <input name="slideshow" id="slide5" type="radio" />
 <div id="slides">
 <div class="inner">
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
  <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
  </div>
  <div class="a_slide">
  <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
  </div>
  </div>
 </div>
 <div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
 </div>
</div>

Le CSS

Si vous envoyez à présent le HTML sans le CSS sur votre PA, vous verrez très vite que ça ne ressemble pas à grand chose... En effet, vu que nous avons que des class et des id, les div n'ont aucune hauteur ou largeur et donc, rien ne s'affiche. Enfin, mis à part les input (donc les boutons de type radio) dont le premier est coché... Et comme vous le voyez dans le résultat final, ces derniers ne sont même pas présents! Mais pas de panique: le CSS3 et sa magie va bientôt opérer, et vous aurez bientôt un superbe slideshow!

Cependant, nous avons beaucoup de choses à voir, alors là aussi je vais utiliser quelques titres pour les séparer un peu mieux!

Mise en place du bloc du slideshow

Tout d'abord, nous allons masquer les input, c'est à dire, faire en sorte qu'ils n'apparaissent pas. En effet vu que pour l'instant c'est la seule chose qui apparaisse mais que c'est la seule chose qu'on ne veut PAS voir apparaître, il suffit de faire en srte qu'ils ne s'affichent pas à l'aide d'un display: none;
Nous avons donc ceci:

Code:

/* Permet de cacher les input (apparait sous forme radio sinon) */
#slideshow input {
  display: none;
}

Maintenant que nous avons un "tableau blanc" sur lequel travailler, il est donc temps de commencer par le commencement: la balise qui entoure notre slideshow, à laquelle j'avais donné plus tôt l'id "slideshow". Nous allons donc tout de suite lui donner une largeur et une hauteur, mais aussi un position relative. C'est important, notamment pour positionner les flèches, ou tout autre élément que vous voudriez jouter aux slideshow (autre que les slides et les flèches).
Nous avons donc ceci:

Code:

/* Création du slideshow (contour) */
#slideshow {
  position: relative;
  width: 800px;
  height: 400px;
}

Maintenant, dans l'ordre logique des choses, je vais m'occuper des slides. Je vais donc commencer par la div à laquelle j'ai donné plus tôt l'id "slides", qui me permettra d'afficher un seul slide à la fois. Je vais donc lui donner la taille d'un seul slide (qui pour moi est la même taille que le slideshow en entier), le positionner de manière absolue tout en haut du slideshow (avec une position absolute) et un overflow: hidden, ce qui va me permettre de cacher tout ce qui dépasse de là, et donc, vous l'aurez compris, de cacher toutes les autres slides. En plus de cela, vu que mon slideshow aura une image de fond fixe et que seul des render vont passer par-dessus, j'ai mit une image de fond.

Code:

/* Conteneur de inner et de tous les slides, permet d'afficher un seul slide à la fois. */
#slides {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 800px;
  height: 400px;
  background-image: url('http://animeipics.files.wordpress.com/2014/01/konoha-thrids-era.jpg');
  background-size: 800px;
  background-position: center center;
  overflow: hidden;
}

   

Maintenant que nous avons ceci, nous allons regarder la première div fille de slides, qui n'est autre que la div à la class "inner". C'est donc lui qui va avoir tous nos slides. Je lui donne donc la bonne taille (donc pour qu'il contienne 5 slides). Rien de spécial donc... mis à part donner une largeur!

Code:

/* Conteneur de tous les slides */
#slides .inner {
  width: 500%;
}

On a donc les deux conteneurs des slides, mais maintenant, il faudrait mettre en forme les slides eux-même! On va donc leur donner une taille (la même que #slides), mais également une position relative (pour pouvoir positionner les choses en absolu dedans, notamment les images et, bien plus tard, les bulles, que l'on verra dans la seconde partie) et enfin un float: left;

Code:

/* Mise en forme des slides */
#slides .a_slide {
  position: relative;
  width: 800px;
  height: 400px;
  float: left;
}

Et c'est presque fini! en effet, à présent, il y a le code pour le déplacement des slideshow à faire! Et là, on en aura terminé pour le bloc "brut" du slideshow!
Voici donc la partie la plus importante du code, qui est aussi présente sur le slider dont je me suis inspirée pour faire celui-ci:

Code:

/* Déplacement des slides */
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

Je pense donc qu'à présent vous comprenez le code! Si tel input est checked, on change la marge à gauche de l’élément frère #slides .inner

Vous pouvez à présent envoyer votre code et voir... une image fixe! Et oui! Il n'y a pas encore les contrôles, donc les flèches, qui nous permettront de cocher les différents input! Du coup, eh bien... rien ne bouge! Il va donc falloir lire la suite pour mettre en place les flèches et, donc, ce qui nous permettra de contrôler le slideshow et de passer d'une slide à l'autre!

Mise en place des contrôles (flèches)

Les codes pour les contrôles est en réalité vraiment très "simple" dans le sens où, il n' a pas beaucoup de lignes, cependant, il peut être difficile à comprendre! Cependant, pas de panique: je suis là pour ça!

Commençons par le plus simple, qui est, le placement des flèches. Comme vous pouvez le voir, les flèches dépassent du slideshow. Ce n'est pas un problème, et d'ailleurs, vous pouvez bien sûr changer ça selon comment vous voulez avoir votre slideshow (avec les position: absolute de #slides et de #controls).
Quoiqu'il en soit, à l'aide du div d'id "controls" on va positionner les flèches au milieu de notre slideshow (à l'aide du top: 45%), et lui donner comme hauteur la taille des images que l'on va utiliser pour nos flèches. En plus de cela, il faut lui donner un z-index de 0 (ou en tout cas un z-index plus petit que celui de #slides) pour qu'ils soit derrière slides.
Notez cependant que si vous voulez que les flèches soient par-dessus votre slide, il va falloir changer ça, et même peut-être, avoir à placer chaque flèche individuellement! (car il faudrait que le z-index soit plus grand que celui des slides pour que les flèches apparaissent et soient cliquables, cependant, sur toute la longueur et hauteur de controls, les slides ne seraient plus cliquables (et n'auraient plus d'effet au passage de la souris).
Bref, en gros, voici le code:
[/b]

Code:

/* Mise ne place de l'élément contenant les flèches */
#controls {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50px;
}

Assez simple n'est-ce pas? Mais pour l'instant, on a toujours pas les flèches! En effet, nous voulons que les flèches s'affichent toujours, mais soient par rapport au bon label, c'est à dire, que lorsque le slide1 est coché, qu'il y ait la flèche de droite qui aille vers le slide2, et la flèche de gauche qui aille vers le slide5 (le dernier slide). Du coup, il faut une manière de cacher TOUS les labels, sauf le bon label correspondant au slide précédent et au slide suivant (et les bons qui plus est). Il faut donc tout d'abord mettre ce code:

Code:

/* On met les labels à la bonne taille et on les cache */
#controls label {
  display: none;
  width: 50px;
  height: 50px;
}

Donc ici, on cache tous les label et on leur donne la taille de l'image. MAintenant, passons au code compliqué!

Code:

/* Mise en place de la flèche vers le slide suivant */
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
  background: url('http://csscience.com/responsiveslidercss3/next.png') no-repeat;
  float: right;
  margin: 0 -70px 0 0;
  display: block;
}

/* Mise en place de la flèche vers le slide précédent */
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
  background: url('http://csscience.com/responsiveslidercss3/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 -70px;
  display: block;
}

Nous avons donc à présent les flèches et le slide en pleine état de marche, cependant, sans les animations, eh bien, c'est un peu moche... Mais pas de soucis, les animations arrivent dans la partie suivante!

Animer les slides et effets sur les flèches

Nous allons tout d'abord faire l'animation sur les flches. Tout simplement parce que, eh bien, c'est le plus simple! En effet, comme vous pouvez le voir, le seul effet sur mes flèches est un changement d'opacité. Très simple donc, et un changement qu'il suffit d'appliquer sur le CSS #controls label en ajoutant de l'opacité, et en faisant un changement au passage d ela souris grâce à la pseudo-classe :hover!
Je vous donne donc le code, qui n'a vraiment rien de compliqué !

Code:

/* On met les labels à la bonne taille et on les cache */
#controls label {
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.3;
  transition: all ease-out 0.2s;
}

/* Effet au passage de la souris sur les flèches */
#controls label:hover {
  opacity: 0.8;
  transition: all ease-out 0.2s;
}

Voilà donc qui est fait pour les flèches! Maintenant, il est temps de passer au slides, pour qu'ils se déplacent de façon fluide. Le code est assez court (deux lignes), mais vraiment très condensé: je vous explique cependant tout!

Code:

/* Animation slides */
#slides .inner {
  -webkit-transform: translateZ(0);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

Et maintenant, tout est bon! Nous n'avons plus qu'à placer les images correctement (comme je l'ai prévu dès le départ à gauche et à droite de chaque slide) et on en aura fini de cette première partie pour la création du slideshow!

Mise en place des images

Maintenant que nous avons tout le slideshow, il est temps de placer les images au bon endroit, comme j'avais dit lorsque j'ai écrit le HTML, j'ai prévu d'en mettre certaines à gauches et certaines à droites.
Je vais tout d'abord commencer par mettre toutes les images en position absolue. Je vais aussi faire en sorte qu'elle ne dépassent pas la hauteur du slideshow, donc les redimensionner à une hauteur de 400px.

Code:

/* Placer toutes les images en absolu. */
.a_slide img {
  position: absolute;
  display: block;
  height: 400px;
}

Maintenant, on va placer toutes les images avec la classe left à gauche

Code:

/* On place les images à gauche */
.a_slide img.left {
  bottom: 0px;
  left: 0px;
}

Et toutes les images avec la classe right à droite!

Code:

/* On place les images à droite */
.a_slide img.right {
  bottom: 0px;
  right: 0px;
}

Vous pourriez très bien utiliser les bottom, top, left et right pour placer les images ailleurs, et donc avoir plus de classes ou même des id pour chaque image si chacune doit être mise à un endroit spécifique! En somme, vous pouvez utiliser la position absolue comme vous le voulez pour placer les images!

Maintenant, il est temps de passer à la deuxième étape si vous voulez placer des bulles d’informations au passage de la souris sur les images!

Créer une infobulle

Bonjour à tous! Voilà un petit tutoriel pour vous apprendre à faire une infobulle! Nous verrons rapidement les bases de ce qu'est une infobulle, mais également ses différentes variations (sur une image, sur un texte ou sur un objet (div, table, etc. mais nous ne verrons comme exemple qu'une div!)) ainsi que quelques effets sur cette dernière. Une fois avoir lu ce tuto, vous pourrez alors sans problème créer une infobulle par vous-même sans avoir à utiliser un LS uniquement pour ça! ^^

Les bases

Pour créer une infobulle, il nous faut trois choses: une balise qui entoure notre objet sur lequel sera l'infobulle ET l'infobulle, l'infobulle en elle-même, et enfin, l'objet sur lequel sera l'infobulle.
Comme déjà exprimé dans l'introduction et comme vous le voyez avec les titres de ce tuto, l'objet sur lequel sera l'infobulle peut être de plusieurs formes: un texte, une image, ou alors un autre objet, comme une able, un div ou une section entière même.
Pour afficher une infobulle, nous utiliseront alors la pseudo-classe hover qui permet de changer un objet au passage de la souris. On pourrait bien sûr utiliser d'autres pseudo-classes, comme target pour que cela soit "au click", cependant, ce tuto va uniquement vous montrer pour le hover (le target étant largement moins utilisé et quelque peu plus compliqué).

Passons donc tout de suite au code!

Code:

<div class="conteneur"><div class="objet_vise"></div><div class="infobulle"></div></div>

Effectivement, et là, pour l'instant, ce code ne fait pas grand chose... et n'affiche rien! En effet, vu que les div sont vides, rien ne s'affiche! Cependant, c'est la structure de base pour notre infobulle: une div qui entoure deux objets: le premier étant l'objet sur lequel sera l'infobulle, et le second l'infobulle en elle-même.
Vous pouvez bien sûr déjà remplir les deux div internes, et même changer la première div par autre chose (une imae, un span, etc) comme nous verrons plus tard, mais l'important est d'avoir ces trois éléments!

Cependant, avant de passer à autre chose, commençons tout de suite par la base du CSS pour ces trois éléments. Faites bien attention aux classes et ce qu'il s'y fait.

Code:

.conteneur {
position: relative;
height: 100px;
width: 100px;
overflow: visible;
}

.conteneur .objet_vise {
height: 100px;
width: 100px;
background-color: black;
}

.conteneur .objet_vise:hover {
/* ici, on peut modifier l'objet visé au hover si on le veut. Ici, je change sa couleur!*/
background-color: red;
}

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
}

Et ça donne ceci:



Effectivement! Mais ne vous inquiétez pas, voici les explications, pas à pas!

Code:

.conteneur {
position: relative;
height: 100px;
width: 100px;
overflow: visible;
}

Code:

.conteneur .objet_vise {
height: 100px;
width: 100px;
background-color: black;
}

Code:

.conteneur .objet_vise:hover {
/* ici, on peut modifier l'objet visé au hover si on le veut. Ici, je change sa couleur!*/
background-color: red;
}

Pour que vous visualisiez mieux, voici ce qu'on obtient avec .conteneur .objet_vise:hover { background-color: red; }


Et voici ce qu'on obtient avec .conteneur:hover .objet_vise { background-color: red; }


Il faut mettre votre souris sur l'infobulle!

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

Code:

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
}

Les variations

Sur une image

Donc au lieu d'une div, on peut simplement avoir une image en tant qu'objet visé (donc objet sur lequel sera l'infobulle).



Et voici le code correspondant:

Code:

<div class="conteneur"><img src="http://i55.servimg.com/u/f55/09/03/38/36/photo-10.png" title="Titre Image" alt="Titre Image"><div class="infobulle"></div></div>

Avec le CSS correspondant:

Code:

.conteneur {
position: relative;
height: 130px;
width: 130px;
overflow: visible;
}

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
}

Effectivement, mis à part la taille du conteneur qui change pour s'adapter à la taille de l'image, et le fait que la partie sur "objet_vise" est simplement effacée, eh bien rien ne change! C'est ça qui est bien avec les infobulles: changer d'un objet à l'autre est très simple!


Eh bien il vous suffit d'ajouter ces deux choses là:

Code:

.conteneur img {
/* Effet sur l'image lorsque la souris n'est pas là */
}

.conteneur img:hover {
/* Lorsque la souris est sur l'image*/
}

Ou bien sûr, comme expliqué plus tôt, on peut mettre .conteneur:hover img à la place de .conteneur img:hover.

Donc ceci permet de mettre en forme toutes les images qui sont dans conteneur.


Et oui! Si vous ne voulez pas que les images dans votre infobulle soient touchées, alors il va falloir mettre une classe à l'image sur laquelle sera l'infobulle, et donc refaire comme plus tôt.

Code:

<div class="conteneur"><img class="objet_vise" src="http://i55.servimg.com/u/f55/09/03/38/36/photo-10.png" title="Titre Image" alt="Titre Image"><div class="infobulle"></div></div>

Et voilà, le problème est contourné en réutilisant les codes de départ, mais en pansant que "objet_vise" est à présent une image!

Sur un texte

Voici donc ce que l'on veut avoir:
Blah blah blah. Ceci aura une infobulle...

Blah blah blah.

Et voici les codes:

Code:

Blah blah blah. <span class="conteneur"><span class="objet_vise">Ceci aura une infobulle... </span> <div class="infobulle"></div></span>Blah blah blah.

Code:

.conteneur {
position: relative;
overflow: visible;
}

.conteneur .objet_vise {
color: blue;
}

.conteneur .objet_vise:hover {
color: red;
}

.conteneur .infobulle {
position: absolute;
top: 20px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999;
}

À nouveau pas grand chose ne change, si ce n'est que l'objet visé et le conteneur sont tous deux des span! En effet, c'est très important, car les span sont des objet "inline" (=en ligne) c'est à dire qu'il n'y a pas de retour à la ligne avant ou après de façon forcée, ce qui permet de faire que tout ceci reste dans le texte.
Vous remarquerez aussi que la hauteur et la largeur des éléments en span ont été retirés, vu que ceux-ci se mettent à la taille de façon automatique: pas besoin donc de les mettre!

C'est donc une plus "grande" différence que ce qu'il y avait pour le passage d'une div à une image, mais relativement simple tout de même!

Sur un objet (div)

Eh bien c'est exactement le code vu au départ de notre tuto! Vos pouvez bien-sûr transformer votre div comme bon vous semble, y mettre du texte, une image de fond, etc etc etc. Bref, beaucoup de possibilités, et je laisse votre créativité imaginer que faire et le tenter! Comme d'habitude, la section des problèmes est là pour vous aider avec tout problème de code!

Quelques effets

Maintenant que vous savez comment faire une infobulle, vous devez vous dire que c'est assez... moche! En effet, elle ne fait qu'apparaître tout simplement et disparaître aussi vite qu'elle est venue! Aucune transition, etc. Je vais donc ici vous montrer quelques exemples de transitions, assez simple à effectuer sur les infobulles! Nous n'allons donc que toucher sur le code CSS des infobulles, le rester restera pareil. (Je mets juste une transition sur l'objet visé pour que cela soit plus joli).

Apparition en fondu

Ce que ça donne:


Et voici le CSS correspondant:

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
transition: all ease 1;
}

Comme vous le voyez, il suffit d'ajouter un "transition". Ici, elle se fait en une seconde (le 1s), mais on peut aussi la faire plus court ou plus longue en changeant cette valeur. On a également ajouté le transition au hover ET au normal. En effet, si on veut que l'infobulle apparaisse doucement, on voudrait aussi qu'elle disparaisse de la même manière!
Si vous ne voulez que cela soit fait en fondu que dans un sens, dites-vous que le "hover" est l'apparition, et le normal pour la disparition.

Apparition en agrandissement

Voici ce que nous voulons:


Et le code CSS correspondant, on utilise transform: scale:

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
-webkit-transform: scale(0);
transform: scale(0);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
-webkit-transform: scale(1);
transform: scale(1);
visibility: visible;
z-index: 999:
transition: all ease 1;
}

Comme vous pouvez le voir, on retire l'opacité et on met simplement le transform: scale à la place, en le faisant aller de 0 à 1. c'est à dire que l'infobulle ira d'une grandeur = 0 à une grandeur =1 (qui est sa grandeur naturelle. On n'a donc plus besoin d'opacité.
À nouveau, on utilise une transition pour que l'apparition se fasse graduellement!

Apparition en rotation

Voici ce que nous voulons:


Avec le code CSS:

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: all ease 1;
}

Ici, on utilise donc transform: rotate, en passant de 360 à 0 degrés. Cela permet de faire faire un tour complet à l'infobulle. Il est obligatoire d'avoir 0 degrés au hover, pour que votre infobulle soit à l'endroit est droite. Vous pouvez très bien changer la valeur si vous voulez, par exemple, qu'elle soit quelque peu en biais lors de l'arrêt de la transition!
La valeur de rotate au "normal" indique donc où on veut commencer la rotation, donc si l'infobulle fait un tour entier, un demi tour, etc. Bref, à vous de choisir!
Vous remarquez également qu'on a gardé l'opacité ici, donc qu'on a un mélange entre un fondu et une rotation! Cependant, ceci est obligatoire, car autrement, votre infobulle apparait de façon soudaine, et effectue simplement une rotation une fois apparue!
Et bien sûr, l'utilisation de transition pour que tout ceci se fasse un peu comme une animation!

Apparition en rotation et agrandissement

Voici ce que nous voulons:


Avec le code CSS:

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
-webkit-transform: rotate(360deg) scale(0);
transform: rotate(360deg) scale(0);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
visibility: visible;
z-index: 999:
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
transition: all ease 1;
}

Comme vous pouvez le voir, il y a présent deux valeurs à transform: rotate ET scale. Grâce à scale, on peut également supprimer l'opacité, vu que l'on part d'une grandeur nulle et que donc l'infobulle n'est pas "là".
Et bien sûr la transition pour l'effet d'animation.

Vous pouvez très bien a imaginer d'autres formes d'apparition pour les infobulles, mais ceci vous donne déjà quelques idées!

Et voilà, c'est la fin de ce tuto! Si vous avez des questions ou des problèmes, n'hésitez pas!