Jak zblurować obrazek, a nie tekst

Question

Witam.
Koncepcja jest taka że obrazek jest zblurowany, chce na nim wyświetlać krótki opis (tekst się wyświetla ale również jest zblurowany i to tutaj tkwi mój problem).

Nie wiem jeszcze jak to naprawić, widziałem kilka sposobów na internecie jednak nie potrafiłem ich zastosować w swoim CSS.

HTML:

<div id="obraz1">
	<p id="ap">Aprilia SXV
Mocne supermoto ze stajni Aprilia - charakteryzuje się bardzo niską wagą
Rodzaj: supermoto
Pojemność: 550kg
Moc maksymalna: 72km
Waga: 122kg</p>
	</div>

CSS:

#obraz1
{
margin:30px 30px 0px 0px;
filter: grayscale(1) blur(5px);
float:left;
width:350px;
height:200px;
background-image: url("SXV550.jpg");
background-size: 100%;
}

#obraz1:hover
{
filter: grayscale(0);
filter: blur(0);
}

#ap{
font-size:20px;
filter: blur(0px);
}

 

Answer 1

Na tę chwilę wykminiłem coś takiego:

~ http://codepen.io/anon/pen/qaOZmV

Przerób kod, pod swoje oczekiwania, i volia!

(Nie sądzę, aby był to najlepszy sposób na poradzenie sobie z tym problemem. Staram się jednak unikać pustych tagów.)

Answer 2

http://codepen.io/mitelak/pen/amdbxm takie coś wykorzystując :after można zrobić na przykład

Pamiętaj tylko o tym, że filter nie działa na wszystkich przeglądarkach https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility