Blur эффект с помощью jQuery

257

12 декабря 2016, 10:09

Есть div, его ширина 1000x300, внутри него есть img - его ширина 150x150.

Нужно сделать фон дива в стиле blur заливки, используя цвета присущие дочернему img.

Пытался я делать с помощью вот этой штуки, но у меня ничего не вышло, из картинки оно делает размазанную картинку такого же размера, но размазать по всему диву у меня не получилось, пробовал ее и как dataurl для бэкграунда, но все равно толку ноль.

Подскажите, как решить данную проблему?

Answer 1

HTML:

<div class="someClass">
    <div class="blur"></div>
    <img src="image.jpg" class="someImageClass" alt="">
</div>

CSS:

.someClass{
        width: 1000px;
        height: 300px;
        margin: 0 auto;
        position: relative;
    }
    .blur{
        width: 1000px;
        height: 300px;
        position: absolute;
        left: 0;
        top: 0;
        background: url("image.jpg") no-repeat center;
        background-size: 100%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
    }
    .someImageClass{
        width: 150px;
        height: 150px;
        display: block;
        vertical-align: bottom;
        margin: 0 auto;
        position: relative;
    }

JSFIDDLE: https://jsfiddle.net/0n4bdubk/