Fiche règlement avec transition (CSS + HTML)

Bonjour à tous mes amis ! Voici ma première fiche, en espérant que cela vous plaise !



Tout d'abord, vous devez savoir que cette fiche se décompose en deux parties. Une partie CSS qui sera à ajouter dans la feuille de style CSS de votre forum et une seconde partie HTML qui devra être mise dans votre sujet à poster.

CSS

Le code CSS est à ajouter dans le Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS

Code:

/* FICHE DE REGLEMENT
  par Yukimura Esuki sur Never Utopia
*/
.fond_premier {
    margin: auto;
    width: 600px; /* largeur image */
    height: 300px; /* hauteur image */
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
}

.image_fond {
    width: 600px; /* largeur image */
    height: 300px; /* hauteur image */
    position: relative;
    z-index: 2;
    transition: 1s;
}

.sous_image {
    width: 600px; /* largeur image */
    height: 300px; /* hauteur image */
    margin-top: -300px; /* hauteur image */
    position: relative;
    z-index: 1;
}

.fond_premier:hover .image_fond {
    transform: translateX(100%);
    transition: 1s;
}


.fond_secondaire {
    margin: auto;
    width: 600px;
    border: solid 1px black;
    box-sizing: border-box;
    background-color: #545454;
}

.sous_titre {
    margin: auto;
    padding-top: 5px;
    padding-bottom: 15px;
    border-top: dotted 1px black;
    border-bottom: dotted 1px black;
    background-color: #A5A5A5;
    font-size: 20px;
    text-align: center;
    box-shadow: 0px 3px 3px black;
}

.texte_cadre_reglement {
    padding: 5px;
    margin: auto;
    width: 75%;
    height: 110px;
    border: dotted 1px black;
    background-color: #A5A5A5;
    box-shadow: 3px 3px 3px black;
    text-align: justify;
    font-size: 13px;
    color: white;
    overflow: auto;
}

/* FIN fiche de reglement */

HTML

Code:

<div class="fond_premier"><div class="image_fond"><img src="http://img4.hostingpics.net/pics/928018imagedessus.png" /></div><div class="sous_image"><img src="http://img4.hostingpics.net/pics/961039Imagedesousrglement.png" /></div></div><div class="fond_secondaire">

<div class="sous_titre">1° / Premier sous-titre</div>

<div class="texte_cadre_reglement">Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.

Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.
</div>


<div class="sous_titre">2° / Second sous-titre</div>

<div class="texte_cadre_reglement">Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.

Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.
</div>

</div>

Salut!

J'ai vu l'icône "en cours", est-ce que le code est terminé?

Comme on n'a pas de nouvelles, j'ai testé le code qui a l'air de bien fonctionner, et j'ai juste retiré quelques petites choses inutiles du CSS (par exemple, la classe "texte_cadre_contexte" n'est pas utilisé, j'ai enlevé les transform qui ne servaient pas, pour alléger :) )

Merci pour ton partage Yukimura

ancien css:

On aura plus qu'à rajouter les bons tags, indexer et déplacer le sujet

Merci pour le partage !

J'adore !