Hover scale e opacity

[Sergio Tacchino]

Ciao a tutti,
ho un'immagine agganciata da css, in cover, e vorrei che all hover questa s'ingrandisca e si scurisca, funziona solo la prima.
Come mai?
Grazie in anticipo per le risposte.

<style>
.contcat .category {
	width: 25%;
	height: 300px;
	float: left;
	position: relative;
	overflow: hidden;
}
.contcat .category .opacity{
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(0,0,0,0.5);
	transition: all .4s ease-in-out; 
}
.contcat .category .cover {
	background-size: cover;
	width: 100%;
	height: 100%;
}
.grow { 
	transition: all .4s ease-in-out; 
}
.contcat .category:hover .opacity{
	opacity: 1;
}
.contcat .category:hover .grow{
	transform: scale(1.1); 	
}
.contcat .category .sport{
	background: url(http://www.giornaledicalabria.it/wp-content/uploads/2014/10/pallone-2.jpg) no-repeat center center; 
}
</style>


<div class='contcat'>
	<div class='category'>
		<div class='opacity'></div>
		<div class='cover sport grow'></div>
	</div>
</div>

[RelaxGraphix]

Ciao Sergio, di per sè il codice che hai scritto è corretto, l' unica modifica da apportare è lo spostamento del "background: rgba(0,0,0,0.5);" da ".contcat .category .opacity" a ".contcat .category:hover .opacity", e tutto dovrebbe funzionare correttamente

DEMO: https://jsfiddle.net/1auaL8q7/