Opacité d'une seule image

**ickyknox** · 05/02/2013, 11h22

bonjour à tous,

j'aimerais réaliser le meme effet que sur ce site :
http://www.paul.fr/shop/fr-FR/Category/Pains_1

j'aimerais qu'en passant la souris sur 1 image,
- que ses bords deviennent blanc
- et que toutes les autres images s'assombrissent

j'ai réalisé ceci , mais mon image a bien ses bords blanc, par contre elle s'assombrit avec les autres.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.pikachoose {
width: 980px;
 
position:absolute;
background-color:#12120A;
margin: 0 auto;margin-top:80px;
}
 
.pikachoose :hover{
opacity:0.5;
}
 
 
.pika-thumbs{ padding: 0 16px; height: 75px; }
	.pika-thumbs li{ width: 144px; height:74px; margin: 10px 0 0 17px; padding: 0; overflow: hidden;
		float: left; list-style-type: none;padding: 0px; margin: 0 5px; background: #fafafa; border: 1px solid #5A4941; cursor: pointer;
		}
 
.pika-thumbs li:hover{border: 1px solid white;opacity:1;}

Comment puis je faire pour que l'image HOVER soit ne fasse pas parti du lot assombrit ?

Merci pour votre aide

**Bovino** · 05/02/2013, 11h30

J'ai rien compris à tes explications et ton code ne permet pas de voir quels éléments sont en jeu et quelle est leur imbrication...
Ceci dit, je suppose que tu ne prends pas en compte que l'opacité s'hérite, donc si un élément possède une opacité, tous ses enfants l'auront aussi !

**raydenprod** · 05/02/2013, 12h21

De plus,

sur le site en question il a des effets type fadeIn /fadeOut ce qui veut dire que tu dois passer par du javascript ou bien utiliser le CSS3.

Peux-tu fournir ton code html que l'on sache à quoi correspondent tes classes CSS...

**ickyknox** · 05/02/2013, 14h28

ah oui désolé ; voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="pikachoose">
	<ul id="pikame">
		<li><a><img src="gallerie/img/1.png"/></a>
        <span>This is an example of the basic theme.</span></li>
 
		<li><a><img src="gallerie/img/2.png"/></a>
        <span>jCarousel is supported and can be </span></li>
 
		<li><a><img src="gallerie/img/3.png"/></a>
        <span>Be sure to check out</a> for .</span></li>
 
		<li><a><img src="gallerie/img/4.png"/></a>
        <span>You can use any type of html you </span></li>
 
		<li><a><img src="gallerie/img/5.png"/></a>
        <span>PikaChoose survives on your .</span>
        </li>
 
		<li><a><img src="gallerie/img/6.png"/></a>
        <span>PikaChoose survives on your </span>
        </li>
 
		<li><a><img src="gallerie/img/7.png"/></a>
        <span>PikaChoose survives on your .</span>
        </li>
 
		<li><a><img src="gallerie/img/8.png"/></a>
        <span>PikaChoose survives on your </span>
        </li>       
 
	</ul>
</div>

**raydenprod** · 05/02/2013, 14h34

voici ce que ça peut donner en CSS 2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<html>
<head>
<style>
body{
	background: #000000;
}
li{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: .7;
}
 
li:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	border: 1px solid #ffffff; 
}
</style>
</head>
 
<body>
 
<div class="pikachoose">
	<ul id="pikame">
		<li><a><img src="gallerie/img/1.png"/></a>
        <span>This is an example of the basic theme.</span></li>
 
		<li><a><img src="gallerie/img/2.png"/></a>
        <span>jCarousel is supported and can be </span></li>
 
		<li><a><img src="gallerie/img/3.png"/></a>
        <span>Be sure to check out</a> for .</span></li>
 
		<li><a><img src="gallerie/img/4.png"/></a>
        <span>You can use any type of html you </span></li>
 
		<li><a><img src="gallerie/img/5.png"/></a>
        <span>PikaChoose survives on your .</span>
        </li>
 
		<li><a><img src="gallerie/img/6.png"/></a>
        <span>PikaChoose survives on your </span>
        </li>
 
		<li><a><img src="gallerie/img/7.png"/></a>
        <span>PikaChoose survives on your .</span>
        </li>
 
		<li><a><img src="gallerie/img/8.png"/></a>
        <span>PikaChoose survives on your </span>
        </li>       
 
	</ul>
</div>
</body>
</html>

Le CSS est bien évidemment à mettre en dehors du html.

SI tu veux mettre des effets de transitions je t'invite à le faire en CSS3 ou en JS

**ickyknox** · 06/02/2013, 19h45

parfait ! merci beaucoup rayden, en effet ca fonctionne très bien !

Opacité d'une seule image

CSS

Vue hybride

Discussions similaires

Partager

Partager