JSFiddle - React, Tailwind, and code Playground

HTML

<!--- 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 -->

CSS

.choose-home:hover .home-images{
  -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-content{
	margin-top:0px;
	position:relative;
	z-index:9999;
}


.home-images-content 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;
 
	
}

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