Как реализовывается скрытие элементов которые не помещаются в контейнер?

Question

[lavezzi1]

Всем привет. Такой вопрос.
Есть потом фоток в контейнере с определенной шириной, идут они друг за другом, но теперь хочу сделать чтобы они шли в ряд, при этом только 4, а все остальные были скрыты и последняя была заблюрина. Как это реализовывается? Спасибо

В таком варианте не устраивает то, что половинка картинки режится, нужно чтобы было либо 3 либо 4 полных, а другие просто скрывались codepen.io/anon/pen/mVEYJX

Думаю нужно как то через js сказать "Добавить класс с блюром последнему элементу в видимой части контейнера"...

Answer 1

[Фёдор]

Считать, сколько картинок влазит по ширине в блок, последней добавлять необходимый класс, а остальные display: none;

Comments

[lavezzi1]

А как посчитать?

Answer 2

[GreatRash]

Думаю нужно как то через js сказать "Добавить класс с блюром последнему элементу в видимой части контейнера"...

::facepalm::

Для начала нужно сказать картинкам, чтобы они не переносились на новую строку если по ширине не помещаются. Для этого есть свойство white-space. А уже потому скриптом считать сколько картинок влезло в блок целиком и блюрить (при помощи CSS-фильтров) остальные. Но нужно учесть, что блюр работает далеко не во всех браузерах.