Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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 !
avatar

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 ~
avatar

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;
}
avatar

[Nihil]
Membre habitué(e)

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

https://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
avatar

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
avatar

Chacha
Modéractif
Modéractif

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

https://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