JSFiddle - React, Tailwind, and code Playground

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 img {
    
}
.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;
}