Agrandir un texte ou image au passage du curseur.

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

Résolu Agrandir un texte ou image au passage du curseur.

Message par KageNekko~ le Lun 3 Juin 2013 - 19:33

Bonjour !

Tout d'abord, je tiens à m'excuser, je sais que un topic à déjà été fait.
J'ai cherché sur google et j'en ai trouvé quelqu'un malheureusement, je n'arrive pas à y accéder.

Alors, j'ai utilisé la fonction rechercher sur votre forum, mais rien du tout.
En gros, si vous pouvez répondre à ma question ou simplement donner le lien d'un des topic qui a déjà été fait ( Car, via google, je ne peux pas y accéder. ), merci !

Donc, voilà.
J'aimerai savoir comment agrandir un texte ou une image au passage du curseur et surtout pour les catégories.

Merci !

EDIT :

Je viens de trouver le tutoriel de transition des liens, j'aimerai faire la même chose sauf qu'au lieu que ça change de couleur, le lien s'agrandit, est-ce possible ?

De plus, j'aimerai sur les catégories, mettre une image et dès que le curseur passe sur l'image, elle se décale à droite pour laisser place à la description de la catégorie, serait-ce faisable ?

Mon Css :
Code:
#fond_pa {
width : 780px;
margin : auto;
background : #c1c1c1;
padding : 10px 10px 5px 10px;
border-width : 1px 3px 1px 3px;
border-style : solid;
border-color : white;
}

.contour_pa {
display : inline-block;
vertical-align : top;
}

.menu {
width : 200px;
padding : 0;
list-style : none;
font-size : 15px;
background : #696969;
border : 1px solid rgba(0,0,0,0.7);
}

.menu li a {
display : block;
padding : 5px;
padding-left : 12px;
border-bottom : 1px solid rgba(0,0,0,0.2);
border-top : 1px solid rgba(255,255,255,0.2);
background : #888888;
text-decoration : none;
color : white;
text-shadow : 1px 0 1px rgba(0,0,0,0.2);
text-align : center;
}

.menu li a:hover {
background : #aaaaaa;
}

.menu li ul li a {
font-size : 12px;
color : white;
text-shadow : 1px 0 1px rgba(0,0,0,0.5);
text-align : left;
}

.menu ul {
margin : 0;
padding : 0;
list-style : none;
height : 0;
overflow : hidden;
-moz-transition : 1s;
-webkit-transition : 1s;
-o-transition : 1s;
transition : 1s;
}

.menu li:hover ul {
height : 134.5px;
overflow : auto;
}

.menu ul li a {
background : #bcbcbc;
}

.menu ul li a:hover {
background : #cecece;
}

.menu ul li a:before {
content : " ► ";
}


#fond_pa h1 {
margin : 0;
text-transform : uppercase;
font-size : 20px;
text-align : center;
color : white;
text-shadow : 1px 0 1px rgba(0,0,0,0.2);
border-radius : 0 0 15px 15px;
border-bottom : 2px dotted white;
}

#bienvenue_pa {
width : 562px;
background : rgba(255,255,255,0.5);
height : 88px;
margin-top : 15px;
margin-bottom : 5px;
padding : 5px;
color : white;
text-shadow : 1px 1px 0 rgba(0,0,0,0.4);
overflow : auto;
text-align : justify;
border : 1px dotted rgba(0,0,0,0.5);
}

.contour1_pa {
display : inline-block;
vertical-align : top;
}

.boites_pa {
width : 273px;
background : rgba(255,255,255,0.5);
height : 89px;
margin-top : 15px;
margin-bottom : 5px;
padding : 5px;
color : white;
text-shadow : 1px 1px 0 rgba(0,0,0,0.4);
text-align : center;
overflow : auto;
border : 1px dotted rgba(0,0,0,0.5);
}

div.infobulles{
opacity : 0.5;
-moz-transition : 2s;
-webkit-transition : 2s;
-o-transition : 2s;
transition : 2s;
position : relative;
display : inline-block;
}
     
div.infobulles img {
width : 70px;
}
     
div.infobulles:hover{
opacity : 1
}

div.infobulles div {
position : absolute;
display : none;
}
     
div.infobulles:hover div {
display : inline-block;
left : 0;
top : 0;
width : 58px;
height : 58px;
border : 1px solid #000;
background : rgba(255,255,255,0.7);
color : #000;
text-align : left;
padding : 5px;
}

#fond_pa a {
color : white;
text-shadow : 1px 1px 0 rgba(0,0,0,0.7);
text-decoration : none;
-moz-transition : 2s;
-webkit-transition : 2s;
-o-transition : 2s;
transition : 2s;
}

#fond_pa a:hover {
color : black;
text-shadow : 1px 1px 0 rgba(255,255,255,0.7);
text-decoration : none;
}

.transparence_logo {
opacity : 0.5;
-moz-transition : 2s;
-webkit-transition : 2s;
-o-transition : 2s;
transition : 2s;
}




body.chatbox {
background-image:url('http://i37.servimg.com/u/f37/17/27/51/39/textur10.jpg');
}


/***ARRONDIR LES CADRES ENVOYER ETC.***/

nput.post{
       
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
       
        }
       
#wrap {
        border-left: 10px solid #f0f0f0; border-bottom:5px solid
        #f0f0f0;-moz-border-radius-bottomleft: 10px;
        -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius:
        10px;border-right: 10px solid #f0f0f0;border-top: 10px ridge #f0f0f0;
        }

        .post{
       
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
       
        }

#submenu {
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        }

div.maintitle {
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        }




.forabg{
        -moz-border-radius:12px;
        -webkit-border-radius:12px;
        border-radius:12px;
        }

.bodyline{
          -moz-border-radius:30px;
        -webkit-border-radius:30px;
        border-radius:30px;
        }
 

.mainoption
{
-moz-border-radius:10px; /**** Border-radius signifie "rayon de la bordure", 10px le rayon de l'arrondissement *****/
-webkit-border-radius:10px; /*** webkit signifie "kit web", 10px le rayon de l'arrondissement ****/
 border-radius:10px; /*** pour linux ***/
}


/***PUBS***/

.module-advert{/*Pas Supprimer , c'est ce qui enlève les pubs du forum*/
  display:none;
}
        /*--- Cette partie correspond à la description du forum ---*/
        .forum-description {
              margin: auto;
              padding: 10px;
              color: #000000;
              width: 80%;
              border: 3px solid #000000;
              -moz-border-radius: 14px;
              -webkit-border-radius: 14px;
              font-size: 12px;
        }
       
        /*--- Cette partie correspond à l'onglet "X messages dans X sujets" ---*/
        .forum-stats {
              -moz-border-radius-topleft: 20px;
              -moz-border-radius-topright: 20px;
              -webkit-border-top-right-radius: 20px;
              -webkit-border-top-left-radius: 20px;
              border-top-right-radius: 20px;
              border-top-left-radius: 20px;
              border-bottom: 0 none !important;
              border-left: 3px solid #000000;
              border-right: 3px solid #000000;
              border-top: 3px solid #000000;
              color: #000000;
              font-size: 11px;
              font-style: italic;
              height: 14px;
              left: 280px;
              padding: 3px;
              position: relative;
              text-align: center;
              width: 200px;
        }
       
        /*--- Cette partie correspond à l'affichage des sous-forums ---*/
        .forum-sousforum {
              color: #000000;
              border: 3px solid #000000;
              border-top: 0px !important;
              -moz-border-radius-bottomleft: 14px;
              -moz-border-radius-bottomright: 14px;
              -webkit-border-bottom-right-radius: 14px;
              -webkit-border-bottom-left-radius: 14px;
              border-bottom-right-radius: 14px;
              border-bottom-left-radius: 14px;
              margin: auto;
              padding: 4px;
              color: #000000;
              width: 50%;
              text-align: center;
              height: 14px;
              font-size: 11px;
        }
/*-----------------PA----------------- */

div.infobulle
{
 position: relative;
 float: left;
color: white;
}

div.infobulle span
{
 display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover
{
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  color: black;
}


/* style de l infobulle */

div.infobulle:hover span
{
display: inline; /* on affiche l'infobulle */
position: absolute;
top: 10px; /* on positionne notre infobulle */
background-color: #CCCCCC;  /* couleur du fond de l'infobulle */
color: #fff; /* couleur du texte */
 padding: 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
 white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
border-color:#000000; /* couleur des bordures */
border-style:solid;
border-width:1px 1px 1px 1px;
}
/* .systab .tab => les onglet */
.systab .tab {
 padding: 2px;
  margin-right: 4px;
  color: #000; /*couleur du texte dans les onglets*/
  background: #BE6045; /*couleur de fond des onglets*/
  border: 3px solid #843c34; /*largeur du contour et sa couleur*/
  -moz-border-radius-topleft: 8px; /*arrondit top gauche de l'onglet*/
  -moz-border-radius-topright: 8px; /*arrondit top droit de l'onglet*/
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  cursor: pointer;
  width: 200px;
  font-size : 13px;
  font-weight: bold;
  list-style: none;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
 margin-right: 4px;
    color: #000;
  background: #e6d3b3; /*couleur de fond*/
  border-top: 3px solid #843c34;
  border-right: 3px solid #843c34;
  border-left: 3px solid #843c34;
  border-bottom: 3px solid #843c34;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  cursor: pointer;
  width: 200px;
  font-size : 13px;
  font-weight: bold;
  list-style: none;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  margin-right: 4px;
  color: #000;
  background: #e6d3b3; /*couleur de fond*/
  border-top: 3px solid #843c34;
  border-right: 3px solid #843c34;
  border-left: 3px solid #843c34;
  border-bottom: 3px solid #843c34;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  cursor: pointer;
  width: 200px;
  font-size : 13px;
  font-weight: bold;
  list-style: none;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
  margin-top: 3px;
  margin-bottom: 1px;
  color: #000;
  background: #e6d3b3;
  border: 3px solid #843c34;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
  padding: 10px;
  list-style: none;
height: 450px;
  width:750px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 5px;

}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
 
}


.boite{
border : 1px solid #000000;
 -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
margin : 8px;
padding: 5px;
text-align: center;}

.staff{
border : 1px solid #000000;
 -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
margin : 8px;
padding: 5px;
text-align: center;}

.navi{
display : block;
background-color : #ffffff;
text-align :center;
border : 1px solid #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
width: 170px;}

.navi:hover{
display : block;
background-color : #BE6045;
text-align :center;
border : 1px solid #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
width: 170px;}

.titre{
background-color : #843c34;
font-size: 13px;
border : 1px solid #000000;
 -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
margin : 8px;
padding: 5px;
text-align: center;}
#content{
  width:100px; /*largeur de ton div*/
  height:100px; /*hauteur de ton div*/
  background:http://zupimages.net/up/3/1426327416.jpg; /*image de fond*/
}


#Title{
margin-bottom: -30px;
display:block;
width: 300px;
color: #533821;
font-size: 50px;
text-shadow: -2px -2px 1px #bf9e69;}

#Body{
  width: 600px;
  background-color: #8B5E37;
  border-top: 9px solid #452f1b; border-bottom: 9px solid #452f1b;
  border-left: 2px solid #452f1b; border-right: 2px solid #452f1b;
  border-radius: 20px;
  color: #bf9e69;
  font-family: Tahoma;
  box-shadow: 0px 0px 6px #5f4f34;}

.STitle{color: #533821;font-size: 30px;text-shadow: -2px -2px 1px #bf9e69;}

.Catégorie{
  width: 100%px;
  height: 900px;
  background-color: #bf9e69;
  border-top: 4px solid #452f1b; border-bottom: 4px solid #452f1b;
}

.catcadre {
background-color : #000000;
padding 10px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:20px;
}

.secondarytitle {
-khtml-border-radius-topleft: 20px;
-khtml-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width : 840px;
margin-left : 50px;
background-image:url("http://i37.servimg.com/u/f37/17/27/51/39/textur10.jpg");
}
.secondarytitle h2 {
margin-left : 50px;
}
attribut{
border-radius: 15px;
}

a.forumlink:hover {font-size:15px;}

KageNekko~
Nouveau membre

Messages : 13
Inscrit(e) le : 03/06/2013

http://lvdc-apocalypse.forumactif.org/
KageNekko~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir un texte ou image au passage du curseur.

Message par Scipion le Lun 3 Juin 2013 - 20:51

Bonsoir

Vous pouvez agrandir les liens au passage de la souris en installant ce code CSS dans votre feuille de style :

Code:
A:hover{text-transform:uppercase;}
Cordialement

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

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

Résolu Re: Agrandir un texte ou image au passage du curseur.

Message par KageNekko~ le Lun 3 Juin 2013 - 21:41

Merci beaucoup !

KageNekko~
Nouveau membre

Messages : 13
Inscrit(e) le : 03/06/2013

http://lvdc-apocalypse.forumactif.org/
KageNekko~ 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