Image spoiler alignée.

[JP :D]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://wwedestiny.forumgratuit.org/

Description du problème

Bonjour a tous.

Je me tourne vers vous aujourd'hui a propos d'un code que j'ai pris sur ce forum concernant les images spoiler. (https://forum.forumactif.com/t302493-spoiler-sous-forme-d-image-contien-du-texte-ou-alternative-wow)

L'effet, c'est l'apparition d'une image quand on survol une première image, la dessus, aucun problème, le résultat est même très satisfaisant.

Mais la, ou cela me pose problème, c'est que j'aimerais aligner 4 images sur la même ligne, alors que quand je met les 4 codes a la suite, ça me les met les unes en dessous des autres. Et si la possibilité est, de faire apparaitre l'image au dessus de la première plutôt qu'en dessous (mais c'est secondaire^^)

Voici le code en question

Code:

[table class="oeuf"][tr][td][center][img]adresse de l'image base du spoiler[/img][/center]
[/td]
[/tr]
[tr][td][center][img]adresse de l'image ouverte[/img] [/center]
[/td]
[/tr]
[/table]

Et le CSS

Code:

 .oeuf {
        width:420px;border-spacing:0px;margin-left:auto;margin-right:auto;
        background: url('http:') ;
        }
        .oeuf tr {height:70px;
        }
        .oeuf tr+tr { height:160px;vertical-align:top;
        }
        .oeuf tr+tr td {display:none;
        }
        .oeuf:hover tr+tr td{display:block;
        }

Je vous remercie d'avance. Merci a forumactif et a ses membres pour l'excellent travail.

Ceci est pour un graphisme futur, donc encore rien d'installer sur le forum.

[Scoubifitz]

bonsoir,

je me souviens de ça ... çà fait un moment ...

vous voulez donc des table en BBcode , cote à cote ,

avec une image en bas du cadre , qui , au survol , fait apparaitre une image en haut du cadre .

le plus simple est de faire un tableau , de placer une BBalise center contenant l'image que vous voulez faire apparaitre , de passer à la ligne et de mettre l'image qui reste visible .

Dans le CSS , préciser que les tableaux seront des block en ligne , que la balise center reste invisible jusqu'au survol de la case .

du charabia ? ... non ...

à mettre dans un message (j'ai pris des smileys comme image)
ce sont 3 tableaux :

Code:

[center][table class="oeuf"][tr][td][center]:?:

titre[/center]

:heart: [/td]
[/tr]
[/table]
[table class="oeuf"][tr][td][center]:D

titre[/center]

8) [/td]
[/tr]
[/table]
[table class="oeuf"][tr][td][center]:shock:

titre[/center]

:evil: [/td]
[/tr]
[/table]
[/center]

à mettre dans le CSS :

Code:

.oeuf {
background:#fff;
display:inline-block;
border:1px solid;
margin:5px;
}
.oeuf tr td{
height:120px;
width:70px;
}
.oeuf div{
visibility:hidden;
}
.oeuf:hover div{
visibility:visible;
}

[JP :D]

Merci beaucoup. Résultat très très satisfaisant, c'est vraiment dans l'esprit rechercher.

Dernière petit chose, il y a t-il la possibilité de réduire l'espace entre 2 lignes, de façon a ce qu'elle ne mesure pas la taille des images caché quand le spoiler est inactif ?

Merci beaucoup Scoubifitz

[Scoubifitz]

Avec les navigateurs modernes , on peut faire pas mal de choses ...

Comme je ne connais pas la taille des images , j'opterai pour une apparition graduée de l'image .

nouveau test ( vous pouvez laisser l'ancien CSS pour comparer )

j'ai pris des images de votre forum :

Code:

[center][table class="kinder"][tr][td][center][img]http://nsa20.casimages.com/img/2014/01/18/140118024129111992.jpg[/img][/center]
[img]http://img15.hostingpics.net/pics/305624Nonews.jpg[/img][/td]
[/tr]
[/table]
[table class="kinder"][tr][td][center][img]http://nsa20.casimages.com/img/2014/01/18/140118024129111992.jpg[/img][/center]
[img]http://img15.hostingpics.net/pics/305624Nonews.jpg[/img][/td]
[/tr]
[/table]
[table class="kinder"][tr][td][center][img]http://nsa20.casimages.com/img/2014/01/18/140118023457526774.jpg[/img][/center]
[img]http://img15.hostingpics.net/pics/305624Nonews.jpg[/img][/td]
[/tr]
[/table][/center]

Code:

.kinder{
display:inline-block;
margin:5px;
}.kinder div img{
width :0;
transition: all 1s ease;
}
.kinder:hover div img{
display:block;
width :100%;
transform: scale(0.8);
}

[JP :D]

Merci, c'est parfait, je ne pouvait pas espérer mieux.

Merci pour les codes, et merci pour tout Scoubifitz