Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Ohé Matelots !
Le tutoriel que je vous propose vous permettra de réaliser un effet sympa mais aussi utile d'infobulles en cascade avec effet slide et rien que en CSS.
Rien de bien nouveau cela dit.
Cette astuce est applicable dans tous les coins et recoins du forum :
PA, page HTML, templates, widget, messages, bref, partout.
Voici ce que vous pouvez attendre :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.
Je tiens aussi à souligner que les images ne sont pas ma propriété et qu'elles ne servent qu'à illustrer ce tuto.
Comme je ne sais plus d'où elles viennent, je vous prie de pas en faire usage.
Commençons par le HTML, que je ne développerai pas trop, si ce n'est que c'est le principe de l'infobulle, à savoir:
le bloc dans le bloc du bloc principal.
- Code:
<div class="primero">
<img class="primero_img" alt="" src="http://i44.servimg.com/u/f44/14/64/74/74/11-4410.jpg" />
<div class="secundo">
<img class="secundo_img" alt="" src="http://i44.servimg.com/u/f44/14/64/74/74/90536410.jpg" />
<div class="slides">
<p class="contenu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.
</p>
<img class="slides_img" alt="" src="http://i44.servimg.com/u/f44/14/64/74/74/11-4410.jpg" />
</div>
</div>
</div>
Pour ce qui est du CSS, il est assez simple à comprendre en suivant les identifiants et les commentaires-CSS:
- Spoiler:
- Code:
/*Bloc image 1*/
.primero {
position: relative;
display: block;
width: 800px;
height: 169px;
margin-top: 5px auto;
border: 3px ridge #fff;
border-radius: 13px;
}
.primero img {
border-radius: 13px;
}
/*Bloc image 2*/
.primero .secundo {
position: absolute;
width: 0px;
height: 0px;
top: 50px;
right: 150px;
-webkit-transition: all 1.7s ease-in;
transition: all 1.7s ease-in;
}
/*Bloc image 2*/
.primero:hover .secundo {
width: 806px;
height: 175px;
-webkit-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
}
/*Image 2*/
.primero .secundo_img {
position: absolute;
right: 0px;
top: 0px;
border: 0px ridge #fff;
border-radius: 13px;
width: 0px;
height: 0px;
-webkit-transition: all 1.7s ease-in;
transition: all 1.7s ease-in;
}
/*Apparition Image 2*/
.primero:hover .secundo_img {
width: 800px;
height: 169px;
border-width: 3px;
-webkit-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
}
/*Bloc image 3*/
.slides {
position: absolute;
border: 0px ridge #fff;
border-radius: 13px;
left: 100px;
top: 50px;
width: 0px;
height: 0px;
overflow: hidden;
-webkit-transition: all 1.7s ease-in;
transition: all 1.7s ease-in;
}
/*Apparition 3e image*/
.secundo:hover .slides {
width: 225px;
height: 300px;
border-width: 3px;
-webkit-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
}
/*Texte sous 3e image*/
.slides p {
margin: 0px;
padding: 5px;
width: 211px;
height: 286px;
background: grey;
overflow-y: auto;
color: darkblue;
font: italic small-caps bold 16px arial;
text-align: justify;
padding: 7px;
}
/*Image 3*/
.slides > img {
position: absolute;
top: 0px;
right: 0px;
width: 225px;
height: 300px;
-webkit-transition: all 1.7s ease-in;
transition: all 1.7s ease-in;
}
/*Déplacement Image 3 au survol*/
.slides:hover > img {
right: 225px;
width: 225px;
height: 300px;
-webkit-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
}
Le plus important dans le CSS ce sont les dimensions qu'il faut définir afin d'établir où les infobulles doivent se décaler, les scrollbar, etc, que vous ayez des images ou du texte dans les infobulles.
Fonctionne avec tous les navigateurs
Bien du plaisir.
