Как правильно отобразить элемент?

Question

[Владислав Колоцей]

Есть блок div, к которому применен фильтр размытия. В этом блоке находится элемент h1, но его мне размывать не надо. Для h1 пишу отмену фильтра размытия, но всё равно ничего не происходит. Почему так?

<div class="stocks first_stok">
   <h1>Текст</h1>
</div>

.stocks{
	-webkit-transition: all 0.5s ease-out 0.0s;
	-moz-transition: all 0.5s ease-out 0.0s;
	-o-transition:  all 0.5s ease-out 0.0s;
	transition: all 0.5s ease-out 0.0s;
	-webkit-filter: blur(4px);
	-moz-filter: blur(4px);
	-ms-filter: blur(4px);
	-o-filter: blur(4px);
	filter: blur(4px);
}

.stocks h1{
	font-family: "Cuprum",sans-serif;
	text-align: center;
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-ms-filter: blur(0px);
	-o-filter: blur(0px);
	filter: blur(0px);
}

Что можно сделать, чтоб текст h1 отображался без размытия? Именно необходимо, чтоб h1 находился внутри блока div, чтоб потом не было проблем с позиционированием

Answer 1

[Anton Filippov]

оберните их в один враппер, но не суйте h1 в размываемый див

Answer 2

[amatory10]

может данный ответ наведет на мысли: stackoverflow.com/questions/22406478/remove-blur-e...

Answer 3

[Валерий Столярчук]

Может z-index поможет