Позиционирование гиперссылки на изображение

Question

У меня возникла проблема с позиционированием ссылки на изображение. Я использую непрозрачность и состояние зависания для этой ссылки, и мне удалось заставить ее работать, но результат не тот, который я ожидал. Наведение не работает так, как я хочу. Я считаю, что есть лучшие способы сделать это, надеюсь, что кто-то сможет мне помочь. Благодаря!

Вот 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> 

И 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

Если вы хотите ссылку и изображение "ведут себя как единое целое", вы должны использовать JavaScript. Ниже я написал пример того, как это будет работать для ссылки и изображения очень упрощенным способом. Живая демо доступна на 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: Если вы не хотите какой-либо переход анимации, просто избавиться от аргумента "slow" внутри fadeTo или измените его на "fast", если вы хотите, чтобы он был быстрее