[Résolu] Effet sombre sur une image lien

Bonsoir,

je cherche à créer un effet plus sombre au survol de la souris sur une image-lien ..

J'ai un doute sur l'écriture dans le css .. Comment le noté ?

J'avais essayé :
.image a img:hover
.image a:hover

Ca ne fonctionne pas

   <div id="images">
		
		<div class="image">  <a href="magicm.html"> <img src="magicm.jpg"/> </a> </div>
                <div class="image">  <a href="beverley.html"> <img src="bvy1.jpg"/> </a> </div>
                <div class="image">  <a href="jbprod.html"> <img src="jbprod-000.jpg"/> </a> </div>
                <div class="image">  <a href="voyages.html"> <img src="voyages.jpg"/> </a> </div>
       
	
		</div>
        

Le div id images correspond à un scroll horizontal d'images.

#images {
   height: 400px;
   overflow: auto;
   position: absolute;
 
   width:900px;
   margin:20px auto;
   white-space: nowrap;
   background-color: white;
 
  
     margin: auto;
     top: 0;
     right: 1%;
     bottom: 0;
     left: 20%;
     width: auto;
     height: 400px;
     
}

---

.image {
   background-color: white;
   display: inline-block;
   width: auto;
   height: 400px;
   border: 1px solid white;
   text-align: center;
   line-height: 400px;
}

Merci d'avance !!

LILOU2404 a écrit :
J'avais juste essayé avec opacity 50% pour voir si mon lien html-css fonctionnait mais sans succès ..

et pourtant ... http://jsfiddle.net/h0ae6zLc/

EDIT

LILOU2404 a écrit :
Par contre j'y pense, j'avais juste précisé opacity pour le hover, est ce que je devrais le précisé aussi sur image tout court, admettons à 70% et sur hover à 100% ?

Non, si l'opacity du hover est différente de la valeur par défaut ça n'a pas d'importance normalement.

Juste au cas où, opacity ne prendra pas de 50% hein, il faut une valeur sans unité entre 0 et 1 (50% = 0.5)
Modifié par _laurent (09 Mar 2015 - 19:36)

Aha Merci ! Ca fonctionne effectivement ..

Je crois bien que c'est à cause de mon unité en % ..

Belle soirée à vous
Modifié par LILOU2404 (09 Mar 2015 - 19:38)

LILOU2404 a écrit :
Je crois bien que c'est à cause de mon unité en % ..

hehehe comme quoi, le problème n'est pas toujours là ou il parait être... belle soirée aussi !

Et j'en profite,

si au survol je souhaite que mon image magicm.jpg fasse devenir son titre dans le menu de gauche en gras comment dois-je m'y prendre ..?


Ici les images-liens

    <div id="images">
		
		<div class="image">  <a href="magicm.html"> <img src="magicm.jpg"/> </a> </div>
                <div class="image">  <a href="beverley.html"> <img src="bvy1.jpg"/> </a> </div>
                <div class="image">  <a href="jbprod.html"> <img src="jbprod-000.jpg"/> </a> </div>
                <div class="image">  <a href="voyages.html"> <img src="voyages.jpg"/> </a> </div>
       
	
		</div>
        

Et ici le menu

   <div class="listeprojet">
                  
                    
                        
                    
                        <ul id="seriephoto">
                       
		         <li><a href="magicm.html" title="aller à la section 3">. M A G I C - M I L L I O N . </a></li>
                            <li><a href="beverley.html" title="aller à la section 3">. B E V E R L E Y  . </a></li>
                         <li><a href="jbprod.html" title="aller à la section 4">. J B - P R O D U C T I O N . </a></li>
                         <li><a href="voyages.html" title="aller à la section 5">. V O Y A G E S . </a></li>
			   <li><a href="voyages.html" title="aller à la section 5">. P R O J E C T I O N N I S T E S . </a></li>
			 <li><a href="blog.html" title="aller à la section 5">  </a></li>
                          <li><a href="accueil.html" title="retour accueil">. &larr; . </a></li>
			
                     
                  
                        </ul>
                    
                     
                </div>

Par exemple, quand magicm.jpg est survolé, magic million dans mon menu devient gras ..

mmmm ce n'est pas simple et pas réalisable en CSS seulement. Le CSS permet de sélectionner des enfants, voir des freres direct ou indirect mais pas des parents. Ici il aurait fallut partir de l'image pour remonter puis redescendre dans l'autre conteneur jusqu'au menu.

Pour réaliser un tel effet il faudra passer par du Javascript, ce n'est pas bien compliqué mais bon.

Pour d'autres questions je te conseil de créer plutôt un autre post car il est dur de s'y retrouver et de suivre une question surtout quand le sujet change et que celui là est marqué résolu

Merci