If you're looking to achieve this effect, a simple tweak to your HTML and some css positioning is all it takes.
You can utilize the css adjacent selector (+), which targets only the element immediately following another element.
In this situation, you need to position your <a> element right before the <img> tag like so:
HTML:
<!--- item -->
<div class="col-lg-4">
<div class="home-images">
<h3>Lacobel</h3>
<a href="#" class="choose-home">Choose</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;
}
Your css targets the .choose-home:hover + img element, while structuring your link below the image with position: absolute; top: 300px;.
JSFiddle Link