A la recherche d'un code mouseover particulier

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu A la recherche d'un code mouseover particulier

Message par Shymerah le Lun 6 Jan 2014 - 0:50

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:

Cette exemple vient du forum Fairy Tale (page d'où provient l'image ici)

Voilà, si quelqu'un aurait le code HTML et le CSS, ça me renderai graaaaandement service !  Very Happy 
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
Nouveau membre

Messages : 3
Inscrit(e) le : 06/01/2014

http://fairy-tail.forumgratuit.be/
Shymerah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: A la recherche d'un code mouseover particulier

Message par Shymerah le Lun 6 Jan 2014 - 18:37

Petit up ~

Shymerah
Nouveau membre

Messages : 3
Inscrit(e) le : 06/01/2014

http://fairy-tail.forumgratuit.be/
Shymerah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: A la recherche d'un code mouseover particulier

Message par [Nihil] le Lun 6 Jan 2014 - 18:43

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 Wink. 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;
}

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: A la recherche d'un code mouseover particulier

Message par Shymerah le Lun 6 Jan 2014 - 19:12

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

Shymerah
Nouveau membre

Messages : 3
Inscrit(e) le : 06/01/2014

http://fairy-tail.forumgratuit.be/
Shymerah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: A la recherche d'un code mouseover particulier

Message par Chacha le Mar 14 Jan 2014 - 10:41

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 résolu
  • 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 Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49819
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum