Sujets similaires

Hey Hey, J'ai encore besoin de votre aide :$
Comme le précise le titre, je voudrai un effet d’opacité au passage de la souris sur l'image des forums comme sur celui-ci: http://pensionnat-yokasami.1fr1.net/
Mais optimisé sous GOOGLE CHROME car j'ai déjà vu le tuto d'ici pour cet effet là mais il était pour Firefox uniquement :s
Voila merci Smile

Hey.

Bon, je suppose que la class n'a pas changé par rapport à ce qu'on a réglé taleur. ;P On va donc spécifier les propriétés pour "categoryImage"... La transition est expliquée dans ce tuto.

Code:: .categoryImage {
opacity:0.5; /* opacité de départ */
filter:alpha(opacity=50); /* opacité pour IE8 et avant */
/* et là on détermine la transition : propriété durée */
-webkit-transition: opacity 1s; /* Chrome et Safari */
-moz-transition: opacity 1s; /* Firefox 4 */
-o-transition: opacity 1s; /* Opera */
transition: opacity 1s;
}
.categoryImage:hover {
opacity:1; /* opacité au survol */
filter:alpha(opacity=100); /* opacité pour IE8 et avant */
}

La transition n'est pas encore supportée par IE. Smile

A noter qu'en déterminant la transition dans ".categoryImage", cela lui permet d'agir quand la souris passe sur l'image ET quand elle la quitte. Pour qu'elle ne se déclenche que quand elle passe dessus, il faut déplacer la transition dans ".categoryImage:hover".

DOARE <3

Tout d'abord merci de ton aide, ensuite je viens juste de l'ajouter a mon CSS ce qui donne ceci:

Code:: .cadrespr1, .cadrespr2{
height:150px;
width: 390px;
margin-left: 230px;
font-size:20px;
font-family: Georgia;
}
.cadrespr2{height:100px;}
.cadrespr3{width: 250px;height:150px;margin-right:7px;}
.cadrespr4{width: 490px;height:105px;margin:auto;}
div.navig{
position:center;
text-align:center;
background-color:#383838; /*Il s'agit de la couleur du cadre*/
border-radius: 10px; /*arrondi*/
width: 750px; /*valeur de taille*/
}
a.mainmenu:hover { /* lorsqu'on passe la souris sur les liens */
color: #B6BE91;
text-decoration: underline;
"font-size: 16px;"
}
/*SOULIGNEMENT*/
a { text-decoration: none;
}
/*FIN DE SOULIGNEMENT*/
.bodyline
{
-moz-border-radius: 20px 20px 20px 20px ;
-webkit-border-radius: 20px 20px 20px 20px ;
border-radius:20px 20px 20px 20px;
}
.categoryImage {
float:left;
padding-right:5px; /* espace entre l'image et le texte */
}
opacity:0.5; /* opacité de départ */
filter:alpha(opacity=50); /* opacité pour IE8 et avant */
/* et là on détermine la transition : propriété durée */
-webkit-transition: opacity 1s; /* Chrome et Safari */
-moz-transition: opacity 1s; /* Firefox 4 */
-o-transition: opacity 1s; /* Opera */
transition: opacity 1s;
}
.categoryImage:hover {
opacity:1; /* opacité au survol */
filter:alpha(opacity=100); /* opacité pour IE8 et avant */
}
.categoryText {
overflow-y:scroll;
height:109px; /* à changer comme tu veux, en fonction de l'hauteur de l'image */
background-color:#474343; /*fond gris*/
padding: 2px; /*espace entre le texte et la bordure*/
}

Tu m'as donner le lien du TUTO donc dois aussi copier les codes de ce sujet ? car je n'ai pour l'instant mis que ce que tu m'as donner et cela ne marche pas.

Non tu n'as rien à copier du tuto. C'était juste pour info. Smile

Tu as une accolade en trop dans ton CSS :

Code:: .categoryImage {
float:left;
padding-right:5px; /* espace entre l'image et le texte */
} /* INTRUUUSE ! */
opacity:0.5; /* opacité de départ */
filter:alpha(opacity=50); /* opacité pour IE8 et avant */
/* et là on détermine la transition : propriété durée */
-webkit-transition: opacity 1s; /* Chrome et Safari */
-moz-transition: opacity 1s; /* Firefox 4 */
-o-transition: opacity 1s; /* Opera */
transition: opacity 1s;
}

Oui mais quand je l'enleve puis que je valide ca me met:

Erreur détectée
Nous avons compté un nombre différent de "{" et de "}". Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

C'est bizarre, c'est le contraire qui devrait se passer. ^^' Tu ne devrais même pas pouvoir valider avec ce que tu m'as montré.

Essaye, après avoir enlevé l'accolade concernée et mon commentaire, de tout sélectionner (ctrl+a), couper le CSS (ctrl+x), valider, le recoller (ctrl+v) et revalider.

Ah oui voila c'est bon ^^
Merci une nouvelle fois DOARE <3
Mon sauveur :$

No souci ! Wink

Hello (:
Je suppose que le problème est résolu, par conséquent je classe (:
S'il y a un souci, n'hésite pas à contacter un modérateur EFFET D'OPACITÉ SUR UNE IMAGE 926145

EFFET D'OPACITÉ SUR UNE IMAGE

EFFET D'OPACITÉ SUR UNE IMAGE

Sujets similaires

Sujets similaires

Partenaires Or