Button hover, image darker

Question

У меня вопрос, как это сделать ... наведите курсор на кнопку и изображение станет темнее? Что-то не получилось ...

Демо: http://jsfiddle.net/h2o8w5y6/

<!--- item --> 
    <div class="col-lg-4"> 
     <div class="home-images"> 
      <img src="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/images/1.jpg"> 
     </div> 
     <div class="home-images-content"> 
        <h3>Lacobel</h3> 
        <a href="#" class="choose-home">Wybierz</a> 
     </div> 
    </div> 
    <!--- item --> 

Answer 1

Существует способ сделать это, с небольшими изменениями в вашей разметки, и немного позиционированием CSS.
В основном вы можете использовать css смежный селектор (+), который будет выбирать только элемент, которому сразу предшествует прежний элемент.
В вашем случае, если вы хотите разместить свой <a> элемент непосредственно перед <img>, чтобы сделать эту работу:
HTML:

<!--- item --> 
<div class="col-lg-4"> 
    <div class="home-images"> 
     <h3>Lacobel</h3> 
     <a href="#" class="choose-home">Wybierz</a> 
     <img src="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/images/1.jpg" /> 
    </div> 
</div> 
<!--- item --> 

CSS:

.choose-home:hover + img { 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: url(grayscale.svg); 
    /* Firefox 4+ */ 
    filter: gray; 
    /* IE 6-9 */ 
    ; 
} 
.home-images h3 { 
    color:#fff; 
} 
.choose-home { 
    background:url('../images/ok_icon.png') #00b9ee no-repeat; 
    background-position:10% 50%; 
    padding-left:60px; 
    padding-top:12px; 
    height:45px; 
    width: 125px; 
    display:block; 
    color:#fff; 
    border-radius:5px; 
    position: absolute; 
    top: 300px; 
} 
.choose-home:hover { 
    background:url('../images/ok_icon.png') #ff0042 no-repeat; 
    background-position:10% 50%; 
    display:block; 
    text-decoration:none; 
    color:#fff; 
    border-radius:5px; 
} 
.choose-home:focus { 
    text-decoration:none; 
    color:#fff; 
} 

В вашем CSS вы предназначаться элемент .choose-home:hover + img, а отдых позиционирует вашу ссылку абсолютно под изображением position: absolute; top: 300px;.

JSFiddle