Positionnement d'un lien hypertexte sur une image

Question

J'ai un problème avec le positionnement d'un lien sur une image. J'utilise l'opacité et un état stationnaire pour ce lien et j'ai réussi à le faire fonctionner, mais le résultat n'est pas ce que j'attendais. Le vol stationnaire ne fonctionne pas comme je le veux. Je crois qu'il y a de meilleures façons de le faire, j'espère que quelqu'un pourra m'aider. Merci!

Voici le code HTML:

<ul id="content-images"> 
<li><img class="show2" src="img/some_img.png" width="176" height="168"></li> 
<li><img class="show2" src="img/some_img2.png" width="176" height="168"></li> 
<li><img class="show2" src="img/some_img3.png" width="176" height="168"></li> 
</ul> 
<span class="show"><a href="#">Link1</a></span> 
<span class="show"><a href="#">Link2</a></span> 

et le code CSS:

.show { 
    opacity:0.8; 
    position:relative; 
    top:10px; 
    left:10px; 
    } 
.show:hover { 
    opacity:1.0; 
    } 
.show2 { 
    left: 1px; 
    opacity: 0.8; 
    position: relative; 
    top: -39px; 
    } 
.show2:hover { 
    opacity:1.0 
    } 

Answer 1

Si vous voulez que le lien et l'image de "se comporter comme un", vous devez utiliser javascript. Ci-dessous, j'ai écrit un exemple de la façon dont cela fonctionnerait pour un lien et une image d'une manière très simpliste. démo Live est disponible à jsFiddle: JSFiddle

HTML:

<ul id="content-images"> 
<li><img id="image1" class="show2" src="http://placehold.it/100x100" width="176" height="168"></li> 
</ul> 
<span id="link1" class="show"><a href="#">Link1</a></span> 

JS (JQuery):

$(document).ready(function(){ 
    //hover image 
    $('#image1').hover(function(){ 
     $(this).fadeTo("slow",0.8); 
     $("#link1").fadeTo("slow",0.8); 
    }); 
    //reestablish previous display when mouse out 
    $('#image1').mouseout(function(){ 
     $(this).fadeTo("slow",1); 
     $("#link1").fadeTo("slow",1); 
    }); 
    //hover link 
    $('#link1').hover(function(){ 
     $(this).fadeTo("slow",0.8); 
     $("#image1").fadeTo("slow",0.8); 
    }); 
    //reestablish previous display when mouse out 
    $('#link1').mouseout(function(){ 
     $(this).fadeTo("slow",1); 
     $("#image1").fadeTo("slow",1); 
    }); 
}); 

OBS: Si vous ne voulez pas animation de transition, il suffit de se débarrasser de l'argument "slow" à l'intérieur fadeTo ou le changer en "fast" si vous voulez qu'il soit plus rapide