Problème d'opacité

2 participants

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

Résolu Problème d'opacité

Message par Magda Sully Mer 5 Sep 2012 - 14:22

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 :
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&amp;#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 &amp; 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! Very Happy


Dernière édition par Magda Sully le Sam 8 Sep 2012 - 14:41, édité 1 fois
Magda Sully

Magda Sully
**

Féminin
Messages : 67
Inscrit(e) le : 10/05/2012

http://robotic-earth.forumactif.org/
Magda Sully a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'opacité

Message par Magda Sully Jeu 6 Sep 2012 - 19:18

UP
Magda Sully

Magda Sully
**

Féminin
Messages : 67
Inscrit(e) le : 10/05/2012

http://robotic-earth.forumactif.org/
Magda Sully a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'opacité

Message par Scoubifitz Ven 7 Sep 2012 - 0:02

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 :

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;
}
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'opacité

Message par Magda Sully Sam 8 Sep 2012 - 14:40

Ok ok, merci, tout marche Wink
Je vais l'appliquer aussi sur les autres encadrés concernés, merci encore!
Magda Sully

Magda Sully
**

Féminin
Messages : 67
Inscrit(e) le : 10/05/2012

http://robotic-earth.forumactif.org/
Magda Sully 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