Agrandir un texte ou image au passage du curseur.

2 participants

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~ Lun 03 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;}
avatar

KageNekko~
Nouveau membre

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

Voir le profil de l'utilisateur 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 Lun 03 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

Scipion
Membre actif

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

Voir le profil de l'utilisateur https://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~ Lun 03 Juin 2013, 21:41

Merci beaucoup !
avatar

KageNekko~
Nouveau membre

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

Voir le profil de l'utilisateur 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

- Sujets similaires

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