Фильтр blur на блоке с изображением

Делаю слайдер через uk-grid
Но в дизайне нарисовано
https://yadi.sk/i/yTdGXAgz3ZkQe6

Видно, что есть картинка, а на ней блок. Ясно, что данный блок позиционируется относительно самого изображения. Вся загвозка как сделать эффект размытия как на картинке. Есть фильтр blur, но он применим к изображению. К примеру https://wp-lessons.com/krossbrauzernyiy-effekt-razmyitiya-blur-izobrazheniya-v-css

У меня же код
<div class="uk-slider-container">
<ul class="uk-slider uk-grid-width-medium-1-1">
<li>
<img src="../images/slider/slide1.png"/>
<div class="desc">
Заголовок
<p>Описание</p>
</div>
</li>
<li><img src="../images/slider/slide1.png"/></li>
</ul>
</div>

 

В том-то и дело, что не получается такого эффекта как должно быть на скрине, что высылал выше. Если можете помочь, то помогите пожалуйста

 

<div class="uk-slidenav-position" data-uk-slideshow>
<ul class="uk-slideshow uk-overlay-active" data-uk-slideshow="{kenburns:'30s'}">
<li>
<img src="../images/slider/slide1.png"/>
<div class="desc blur uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left uk-width-4-10" >
<h3>Лестницы любой сложности на заказ</h3>
<p>Мы используем высококачественный металлопрокат</p>
<mark class="uk-float-left">От 50 000 руб.</mark>
<button class="uk-flex uk-flex-middle uk-float-right">Подробнее &nbsp;<i class="fa fa-long-arrow-right"></i></button>
</div>
</li>
<li>
<img src="../images/slider/slide1.png"/>
</li>
</ul>
<a href="" class="uk-slideshow-nav uk-slideshow-previous" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slideshow-nav uk-slideshow-next" data-uk-slideshow-item="next"></a>
</div>

/*------Слайдшоу-----------*/
.uk-slideshow .desc{
top: 20px; left:20px; padding:10px; color:white;
border-radius:15px;
display: inline-table;
}
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
}
.uk-slideshow .desc h3{color:white; font-size:14pt; font-weight:bold; font-family: 'Roboto', sans-serif;}
.uk-slideshow mark{background:none; color:white; font-size:18pt; font-family: 'Roboto', sans-serif; font-weight:bold;}
.uk-slideshow-nav{
height:27px;width:30px;background: #000; font: 18pt FontAwesome; text-align:center;
position:absolute; top:85%; color:white;
}
.uk-slideshow-nav:hover{color:#ccc}
.uk-slideshow-previous{left:20px;}
.uk-slideshow-next{left: 65px;}
.uk-slideshow-previous:before {content: "\f177";}
.uk-slideshow-next:before {content: "\f178";}

В итоге размытие есть, но размываются и буквы http://i.prntscr.com/5d4f97wdRpGXwsrmmNAlyg.png

/*------Слайдшоу-----------*/
.uk-slideshow .desc{
top: 20px; left:20px; padding:10px; color:white;
border-radius:15px;
display: inline-table;
}
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
}
.uk-slideshow .desc h3{color:white; font-size:14pt; font-weight:bold; font-family: 'Roboto', sans-serif;}
.uk-slideshow mark{background:none; color:white; font-size:18pt; font-family: 'Roboto', sans-serif; font-weight:bold;}
.uk-slideshow-nav{
height:27px;width:30px;background: #000; font: 18pt FontAwesome; text-align:center;
position:absolute; top:85%; color:white;
}
.uk-slideshow-nav:hover{color:#ccc}
.uk-slideshow-previous{left:20px;}
.uk-slideshow-next{left: 65px;}
.uk-slideshow-previous:before {content: "\f177";}
.uk-slideshow-next:before {content: "\f178";}

 

Вот поэтому я прошу помочь. Подскажите как? Ведь у меня основной фон идет где сам слайдер. И там не бэкраунд идет, а изображение напрямую добавляется
<img src="../images/slider/slide1.png"/>
Даже если я сделаю:

<div class="blur uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left uk-width-4-10">
<div class="desc " >
<h3>Лестницы любой сложности на заказ</h3>
<p>Мы используем высококачественный металлопрокат</p>
<mark class="uk-float-left">От 50 000 руб.</mark>
<button class="uk-flex uk-flex-middle uk-float-right">Подробнее &nbsp;<i class="fa fa-long-arrow-right"></i></button>
</div>
</div>
И у decs пропишу
.decs{position: absolute; z-index: 999;} ничего не изменит.
У blur я не могу прописать position:relative, так как у li в слайдшоу стоит абсолютное позиционирование.

 

Я не могу её выложить. Не знаю как я там могу прикрепить картинки, как туда загрузить js от uk-grid
Поэтому и пишу код сюда

 

Я понял. Вы сами не знаете как помочь, а просто выделываетесь. Я уже и код дал и всё. Если бы знали, то помогли бы давно

 

Пожалуйста https://codepen.io/immortal727/pen/BPrJmJ
Но как и говорил, картинки туда не подгрузить, скрипты js также, как и css от uk-grid

 

То что этот сервис хороший, я не спорю. Но он мне ни к чему. Первый раз такой дотошный человек как Вы попался. Да еще и платить за этот сервис, зачем? На это есть компьютер и еверноте
А за сервисы спасибо. Не знал про них
Второй вариант что надо, но он мне не пойдет никак. Так как как картинки-то на будущее будет подгружать клиент сам, а тут получается что надо еще в css это всё прописывать. Не пойдет. Придется обычно делать, через opaticy
Тем более что уж слишком большое вложение блоков