A la recherche d'un code mouseover particulier

[Shymerah]

Bonjour à tous et toutes,

en tant que graphiste du forum Fairy Tail - Génération Slayers (lien ici), je souhaite utiliser un codage que j'ai déjà vu sur un forum qui, lorsque l'on passe la souris (mouseover il me semble ?) sur l'image :
- S'élargit
- S'éclaircit
- Fait apparaître le début d'un overlay en bas de l'image
Et lorsque l'on passe la souris sur l'overlay, il monte et recouvre toute l'image pour afficher du texte (dans le cas suivant une description) en laissant tout de même l'image de fond visible.

Voilà un exemple parce que j'explique comme une cacahuète:

Spoiler:

Voilà, si quelqu'un aurait le code HTML et le CSS, ça me renderai graaaaandement service !   
Merci et à plus tard ! o/

PS : S'il y a besoin de savoir quels templates et les parties de CSS personnalisés, demandez-le !

[Shymerah]

Petit up ~

[[Nihil]]

Bonjour Shymerah,

Voici le code qu'ils ont utilisé, tu peux récupérer directement leur code source très facilement. Néanmoins, c'est pas très beau de copier, je te conseille donc de le personnaliser quelque peu, et de les citer comme source d'inspiration . En effet cela ne fait jamais plaisir de voir son code "volé". Le mieux serait même de leur demander l'autorisation de prendre leur code. Normalement là il y a tout.

HTML

Code:

<span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Hisui E. Fiore</span>PNJ<br>Aucune magie<br>Âge inconnue<br>Princesse de Fiore</span>

Code:

.mozaik_avatar {
    border: 2px solid #9E9E9E;
    box-shadow: 0 0 0 #000000;
    display: inline-block;
    height: 150px;
    opacity: 0.5;
    overflow: hidden;
    position: relative;
    transition: all 1s ease 0s;
    width: 80px;
    z-index: 1;
}
.mozaik_avatar:hover {
    border: 2px solid #9E9E9E;
    box-shadow: 0 0 5px #000000;
    display: inline-block;
    height: 150px;
    opacity: 1;
    overflow: hidden;
    position: relative;
    transition: all 1s ease 0s;
    width: 150px;
    z-index: 999;
}
.mozaik_avatardescr {
    background: url("http://img15.hostingpics.net/pics/301068noir50.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #E4E4E4;
    display: block;
    font-size: 10px;
    height: 150px;
    line-height: 12px;
    margin-top: 150px;
    overflow: auto;
    text-shadow: 1px 1px 0 #000000;
    transition: all 1s ease 0s;
}
.mozaik_avatar:hover .mozaik_avatardescr {
    margin-top: 130px;
    transition: all 1s ease 0s;
}
.mozaik_avatardescr:hover {
    margin-top: 0 !important;
    transition: all 1s ease 0s;
}
.mozaik_avatartitre {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
}

[Shymerah]

Merci beaucoup [Nihil] !
Et ne t'en fais pas, je ne compte pas plagier, étant donné que je déteste ça ^^
Je vais les contacter pour leur demander l'autorisation.

Merci encore :3

[Chacha]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif