Как реализовать на своём сайте размытие боков квадратного изображения, увеличивающее его ширину? (см подробности)
http://joxi.ru/12M8eVjH0gVkqm.png
CSS, HTML. По возможности без скриптов.
Излазил первые 3 страницы поиска по шести смыслово похожим запросам - результат нулевой, кроме идеи с подкладыванием двух размытых изображений под основное - это не то.
Размытие фонового изображения делается очень просто средствами CSS при помощи свойства filter. Для того, чтобы добиться желаемого эффекта попробуйте следующее:
HTML
<div class="container">
<div class="front"></div>
<div class="back"></div>
</div>
CSS
.container {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.front {
width: 60%;
height: 100%;
margin: 0 auto;
background: url(адрес изображения) center center no-repeat;
background-size: cover;
position: relative;
z-index: 1;
}
.back {
width: 120%;
height: 120%;
position: absolute;
top: -10%;
left: -10%;
background: url(адрес изображения) center center no-repeat;
background-size: cover;
filter: blur(5px); /* <---- именно здесь происходит вся магия :) */
}
Вот пример того, что должно получиться. Поэксперементируйте со значениями свойств. Рекомендую использовать относительные значения для параметров ширины и высоты, чтобы конструкция была адаптивной.