Problème d'opacité
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème d'opacité
Bonjour à tous!
Comme le titre l'affiche, j'ai un problème d'opacité. Il est sûrement très simple, un oubli que j'ai pu faire en passant, mais j'aimerais rajouter un effet en plus que je ne sais pas faire. Sur mon panneau d'affichage, j'ai une image de fond avec des encadrés par-dessus, le tout sur une scène.
Je mets les cadres en opacité, peut importe la valeur. Seulement, je rajoute des images dedans, et je voudrais qu'elle soient moins transparentes, et que quand on survole chacune de ces images, l'opacité disparaisse progressivement. J'aimerais donc que l'on m'aide par rapport à ça.
Voici mon CSS :
Et mon HTML :
Et enfin l'adresse de mon forum : http://robotic-earth.forumactif.org/
Merci d'avance!
Comme le titre l'affiche, j'ai un problème d'opacité. Il est sûrement très simple, un oubli que j'ai pu faire en passant, mais j'aimerais rajouter un effet en plus que je ne sais pas faire. Sur mon panneau d'affichage, j'ai une image de fond avec des encadrés par-dessus, le tout sur une scène.
Je mets les cadres en opacité, peut importe la valeur. Seulement, je rajoute des images dedans, et je voudrais qu'elle soient moins transparentes, et que quand on survole chacune de ces images, l'opacité disparaisse progressivement. J'aimerais donc que l'on m'aide par rapport à ça.
Voici mon CSS :
- Code:
.partenaires {
border: 3px double #B3CAD1;
}
.image_fond-pa{
position: relative;
}
.encadre1{
position: absolute;
top: 75px;
left:50px;
width: 300px;
height: 200px;
background-color: #666;
color: #B3CAD1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity:0.8;
text-opacity:1 !important;
}
.encadre2{
position: absolute;
top: 75px;
left:550px;
width: 300px;
height: 200px;
background-color: #666;
color: #B3CAD1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity:0.8;
text-opacity:1 !important;
}
.encadre3{
position: absolute;
top: 280px;
left:330px;
width: 250px;
height: 250px;
background-color: #666;
color: #B3CAD1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity:0.9;
text-opacity:1 !important;
}
.encadre4{
position: absolute;
top: 380px;
left:55px;
width: 225px;
height: 150px;
background-color: #666;
color: #B3CAD1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity:0.9;
text-opacity:1 !important;
}
.encadre5{
position: absolute;
top: 380px;
left:630px;
width: 225px;
height: 150px;
background-color: #666;
color: #B3CAD1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity:0.9;
text-opacity:1 !important;
}
Et mon HTML :
- Code:
<div id="scene"><font face="Bandung Hardcore GP , Castella" size="7"><div class="bienvenue">Bienvenue {USER&#8288;NAME}!</div></font><br><br>
<img src="http://img411.imageshack.us/img411/9369/bannire003.png" class="img_fond_pa"><div class="encadre1"><font align="center" color="#e3d500" face="Georgia">Contexte & Intrigue</font><br>
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamout="10px" scrolldelay="200" loop="infinite" 12"="" face="Georgia" align="justify" height="150p">Nous sommes en 2018. Les conditions de vies s'améliorent, le quotidien se modernise, grâce à des entreprises telles que G4 Good (l'équivalent d'Apple) qui travaille sur des robots permettant l'aide aux personnes âgées, ou sur des ordinateurs surpuissants calculant tout un tas de programmes. Il existe deux types de personnages : les étudiants (de 19 à 23 ans pour la 1ère à la 5ème année) qui sont dans la même Université de New York, qui sera avec l'Usine G4 Good, un des lieux principaux, et les employés de G4 Good. <a href="">Lire la suite<br><br></a><div style="text-align:center;">Chapitre 1 Deuxième partie<br>
Les fameux robots G4 Good deviennent suspects, ils commencent à faire parfois preuve d'autorité, et de rares scandales commencent à faire surface. Aux journaux, des articles déclarent qu'on est sans nouvelles de plusieurs villes américaines entières, comme si elles avaient disparu de la surface de la terre, et on soupçonne la société de robots d'avoir affaire avec ces disparitions.
Une grande manifestation est alors organisée à New York où tout les élèves de l'Université se réunissent dans Central Park. <a href="http://robotic-earth.forumactif.org/t91-chapitre-1-deuxieme-partie">Lire la suite</a></div></marquee></div><div class="encadre2"><font opacity="1"><font align="center" color="#e3d500" face="Georgia"> Top Partenaires</font><br>
<a href="http://tara-duncan.actifforum.com/"><img src="http://img18.imageshack.us/img18/9057/miniban.gif" class="partenaires" title="Tara Duncan le Forum RPG"></a> <a href="http://tara-duncan.niceboard.org/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://img10.hostingpics.net/pics/209464partenariar8831.png" class="partenaires" title="Tara Duncan Niceboard" style="opacity:1"></a> <a href="http://moonlightshadoww.forumgratuit.org/"><img src="http://i45.servimg.com/u/f45/12/65/13/25/icane010.png" class="partenaires" title="Moonlight Shadow RPG" style="opacity:1"></a> <a href="http://pleamorehs.forumactif.com/"><img src="http://img401.imageshack.us/img401/9427/partenariatphs2.png" class="partenaires" title="Pleamore High School RPG"></a> <a href="http://erodaacademy.creerforum.com/"><img src="http://img838.imageshack.us/img838/4006/boutonl.png" class="partenaires" title="Eroda Academy"></a>
<a href="http://erakis.forumactif.fr"><img src="http://img109.imageshack.us/img109/8553/logooosanstitre.png" title="Erakis" class="partenaires"></a>
<a href="http://fartheraway.creer-forum.com/"><img src="http://i48.servimg.com/u/f48/16/38/50/80/farthe10.png" class="partenaires" title="Farther Away RPG"></a></font></div><div class="encadre3"><font opacity="1"><font align="center" color="#e3d500" face="Georgia">Postes vacants</font><br>
<a href="http://robotic-earth.forumactif.org/t11-postes-vacants"><img src="http://i42.servimg.com/u/f42/17/02/47/76/tumblr12.jpg" class="partenaires" title="Roman Stuart"></a>
<a href="http://robotic-earth.forumactif.org/t11-postes-vacants"><img src="http://p15.metroflog.net/pictures/thumbnails/019/24/6/40624019_YGTTDMQE.jpg" class="partenaires" title="Lola Marging"></a>
<a href="http://robotic-earth.forumactif.org/t11-postes-vacants"><img src="http://img7.xooimage.com/files/f/3/2/sans-titre-4-2b10ef9.png" class="partenaires" title="Mickel Artan"></a><br>
<a href="http://robotic-earth.forumactif.org/t11-postes-vacants"><img src="http://72.img.v4.skyrock.net/7210/62127210/pics/photo_62127210_avatar_13.jpg" class="partenaires" title="Matt Stevenson"></a><a href="http://robotic-earth.forumactif.org/t11-postes-vacants"> </a><a href="http://robotic-earth.forumactif.org/t11-postes-vacants"><img src="http://illiweb.com/fa/pbucket.gif" class="partenaires" title="Susan Denfro"></a>
<a href="http://robotic-earth.forumactif.org/t11-postes-vacants"><img src="http://nd02.jxs.cz/030/877/12221b5849_53694326_o2.jpg" class="partenaires" title="Jack Sparting"></a></font></div><div class="encadre4"><font opacity="1"><font align="center" color="#e3d500" face="Georgia">Staff</font><br>
<img src="http://illiweb.com/fa/pbucket.gif" class="partenaires" title="Magda Sully :: Administratrice-Fondatrice, je mange les membres pas sages! *w*"> <img src="http://illiweb.com/fa/pbucket.gif" class="partenaires" title="Jade Medras :: Administratrice"> <img src="http://illiweb.com/fa/pbucket.gif" class="partenaires" title="Kiddy Palmer :: Administratrice"></font></div><div class="encadre5"><font opacity="1"><font align="center" color="#e3d500" face="Georgia">Navigation rapide</font><br><br><br><font align="center">
<a href="http://robotic-earth.forumactif.org/f1-reglement">Règlement</a> :: <a href="http://robotic-earth.forumactif.org/f4-nouvelles-presentations">Présentations</a><br><a href="http://robotic-earth.forumactif.org/t21-demande-de-partenariat">Partenariat</a> :: <a href="http://robotic-earth.forumactif.org/f25-news">News</a></font></font></div><font opacity="1"><font align="center">
</font></font></div>
Et enfin l'adresse de mon forum : http://robotic-earth.forumactif.org/
Merci d'avance!
Dernière édition par Magda Sully le Sam 8 Sep 2012 - 14:41, édité 1 fois
Re: Problème d'opacité
bonsoir,
mettez une transparence sur le fond et une opacité sur les images avec une transition au survol ...
un exemple avec l'encadre3 de votre CSS :
mettez une transparence sur le fond et une opacité sur les images avec une transition au survol ...
un exemple avec l'encadre3 de votre CSS :
- Code:
.encadre3{
position: absolute;
top: 280px;
left:330px;
width: 250px;
height: 250px;
background-color: rgba(100,100,100,0.7); /* transparence */
color: #B3CAD1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.encadre3 img{
opacity:0.6;
transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
.encadre3 img:hover{
opacity:1;
}
Re: Problème d'opacité
Ok ok, merci, tout marche
Je vais l'appliquer aussi sur les autres encadrés concernés, merci encore!
Je vais l'appliquer aussi sur les autres encadrés concernés, merci encore!
Sujets similaires
» [Problème CSS] Problème d'affichage sur la page de redaction des messages et de l'avatar.
» Problème avec mon code de formulaire de problème.
» Problème apparence forum & problème code Javascript
» Problème de centrage avec les sondages: D'où vient le problème?
» Problème de lien dans la PA (Problème résolu)
» Problème avec mon code de formulaire de problème.
» Problème apparence forum & problème code Javascript
» Problème de centrage avec les sondages: D'où vient le problème?
» Problème de lien dans la PA (Problème résolu)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum