Bloc Hover

Ven 8 Avr - 1:35
Salutation ! Comment allez vous ?
Je viens vous déranger un peu ... Je ne sais pas si ma demande fais partis des templates ou non, donc si vous ne pouvais pas, c'est pas grave ^^"

   Largeur maximale : Environ 173px
   Hauteur maximale : Environ 207px
   Schéma : http://nsa37.casimages.com/img/2016/04/08/160408013816467793.png
   Éléments : En fait, quand on passe la souris sur un grade, le grade "s'allume" et un carré blanc transparent s'ouvre et laisse s'afficher la description du justement, grade.
Ce bloc sera placé sur toutes les pages en haut à droite si possible.

   Images : http://nsa37.casimages.com/img/2016/04/08/160408014143739070.png
http://nsa37.casimages.com/img/2016/04/08/160408014143973816.png
http://nsa37.casimages.com/img/2016/04/08/160408014143305968.png
http://nsa38.casimages.com/img/2016/04/08/160408014141500249.png
http://nsa37.casimages.com/img/2016/04/08/160408014143410496.png
http://nsa37.casimages.com/img/2016/04/08/160408014141275079.png
http://nsa38.casimages.com/img/2016/04/08/160408014140781388.png
http://nsa38.casimages.com/img/2016/04/08/160408014141895531.png

   Animations : Petit cadre blanc transparent qui s'ouvre avec la description.
   Informations supplémentaires : Je ne sais absolument pas si cela est possible ou non, si ce n'est pas la cas, j'en suis EXTRÊMEMENT désolée...


Merci beaucoup !
Revenir en haut Aller en bas
Lun 11 Avr - 0:17
Bonsoir,

I. Créer une nouvelle iframe


Code:
<meta charset="UTF-8"><style type="text/css">#GROUPS {width:283px;}
.GROUPS {position:fixed; right:0; width:173px; height:207px; background:url(http://nsa37.casimages.com/img/2016/04/08/160408014143739070.png); line-height:16px;}
/* FOND & COULEUR DES DESCRIPTIONS */
.GROUPS div p{background:rgba(250,250,250,0.5); color:black; font-size:10px; text-align:justify;}
/* MAITRE DE GUILDE */
.maitre {height:30px;}
.maitre p{position:absolute; margin-top:0px; margin-left:-110px; width:100px; height:197px; padding:5px; transform:scale(0); -webkit-transform:scale(0);}
.maitre:hover {background:url(http://nsa37.casimages.com/img/2016/04/08/160408014143973816.png);}
.maitre:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* SERPENTS */
.serpents {height:30px;}
.serpents p{position:absolute; margin-top:-30px; margin-left:-110px; width:100px; height:197px; padding:5px; transform:scale(0); -webkit-transform:scale(0);}
.serpents:hover {background:url(http://nsa37.casimages.com/img/2016/04/08/160408014143305968.png); background-position:0 -30px;}
.serpents:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* CROCS */
.crocs {height:30px;}
.crocs p{position:absolute; margin-top:-60px; margin-left:-110px; width:100px; height:197px; padding:5px;  transform:scale(0); -webkit-transform:scale(0);}
.crocs:hover {background:url(http://nsa38.casimages.com/img/2016/04/08/160408014141500249.png); background-position:0 -60px;}
.crocs:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* NOMADE */
.nomade {height:30px;}
.nomade p{position:absolute; margin-top:-90px; margin-left:-110px; width:100px; height:197px; padding:5px;  transform:scale(0); -webkit-transform:scale(0);}
.nomade:hover {background:url(http://nsa37.casimages.com/img/2016/04/08/160408014143410496.png); background-position:0 -90px;}
.nomade:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* 2EME CERCLE */
.IIcercle {height:30px; }
.IIcercle p{position:absolute; margin-top:-120px; margin-left:-110px; width:100px; height:197px; padding:5px;  transform:scale(0); -webkit-transform:scale(0);}
.IIcercle:hover {background:url(http://nsa37.casimages.com/img/2016/04/08/160408014141275079.png); background-position:0 -120px;}
.IIcercle:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* IER CERCLE */
.ICERCLE {height:30px;}
.ICERCLE p{position:absolute; margin-top:-150px; margin-left:-110px; width:100px; height:197px; padding:5px;  transform:scale(0); -webkit-transform:scale(0);}
.ICERCLE:hover {background:url(http://nsa38.casimages.com/img/2016/04/08/160408014140781388.png); background-position:0 -150px;}
.ICERCLE:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* INITIE */
.initie {height:27px;}
.initie p{position:absolute; margin-top:-180px; margin-left:-110px; width:100px; height:197px; padding:5px;  transform:scale(0); -webkit-transform:scale(0);}
.initie:hover {background:url(http://nsa38.casimages.com/img/2016/04/08/160408014141895531.png); background-position:0 -180px;}
.initie:hover p{transform:scale(1); -webkit-transform:scale(1);}
</style>

<div id="GROUPS"><div class="GROUPS"><!-- MAITRE DE GUILDE --><div class="maitre"><p>Description</p></div><!-- LES SERPENTS --><div class="serpents"><p>Description</p></div><!-- LES CROCS --><div class="crocs"><p>Description</p></div><!-- NOMADE --><div class="nomade"><p>Description</p></div><!-- 2EME CERCLE --><div class="IIcercle"><p>Description</p></div><!-- IER CERCLE --><div class="ICERCLE"><p>Description</p></div><!-- INITIE --><div class="initie"><p>Description</p></div></div></div>

II. Modifier l'iframe en conséquence [ Lien ] et placer son code à la ligne 3 du template overall_header avant le head :
Code:
<iframe id="GROUPSIT" src="lien" scrolling="no" style="width:285px; height:210px;" marginwidth="0" marginheight="0" frameborder="0"></iframe>

Partie CSS :
Code:
#GROUPSIT {
position:fixed; right:0;
}
Revenir en haut Aller en bas
Mar 12 Avr - 0:18
ooooh ! je n'avais pas vu votre réponse ! (enfin ça va, juste 24h après ...)

Je vous remercie énormément !

les nouveaux membres de la guilde, ou simple visiteur, pourrons voir les grades qu'on propose rapidement *-*

Merci énormément (encore une fois)
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum