Как задать прозрачность изображения при наведении на блок рядом?

Question

[ЛС]

Доброго времени суток!
Есть блок с информацией о товаре - Изображение, заголовок и описание.
Необходимо сделать изображение прозрачным при наведении на блок с заголовком и описанием.

<div class="product">
	<a href="" class="productLink">
		<img src="" alt="" class="thumbnail">
		<div class="meta">
			<h2>Заголовок</h2>
			<p>Краткое описание</p>
		</div>
	</a>
</div>

.product {
	background-color: #333;
}
.meta {
	position: absolute;
	top: 25%;
	text-align: center;
	padding: 0 10%;
	color: #fff;
	font-weight: normal;
}
.meta:hover img.thumbnail {
	opacity: .3;
	transition: .3s;
}

Что не так?

Answer 1

[maxsnw]

По css разметке у тебя идет вложенность картинка лежит в мете и вот при наведении на мету, делай имейдж прозрачным.

Сделай

a:hover img.thumbnail {
opacity: .3;
transition: .3s;
}

Answer 2

[TerNik]

.meta:hover img.thumbnail -изображение с классом thumbnail ищется внутри элемента с классом meta.