Если вам нужен размытый полупрозрачный блок, то без JS не сделать, пока backdrop-filter, который вам нужен, поддерживается только в Safari 9 и на Safari iOS.
Если рассматриваете JS решения, копайте в сторону плагинов, например blur.js.
Я бы системно запретил вопросы в разделы CSS и HTML оставлять без кода)))
А то хрен поймешь, что человеку нужно. А писать свою страницу целиком ради одной кнопки влом.
Создайте фиддл и покажите, что у вас не так. Тогда вам помогут быстро и качественно.
Ну, к примеру bxSlider, берем и переделываем под свои нужды.
Как можно видеть из первого и второго примеров, bx-pager - это обычный див рядом со слайдером, внутри картинки. При помощи float или других средств можно поставить его куда угодно)
А в прочем, сейчас будет много советов. И много слов о том, что это всё легко переделывается.
Смотрите и выбирайте)
Это разные понятия.
Адаптивный - только адаптируется к разрешению экрана.
А отзывчивый - меняет размеры текста, кнопок и других элементов в зависимости от устройства.
Например, на одном и том же разрешении экрана 1920х1080 отзывчивый сайт может смотреть по разному, если его открыли с ноутбука, настольного компьютера или телевизора, не смотря на одинаковое разрешение.
С недавнего времени стал всё чаще использовать векторную графику, не заморачиваясь над х2 или х3 разрешением.
Хотя, конечно, х3 это еще очень и очень редкое явление, однако нужно уже смотреть в будущее.
От дизайнеров часто требую именно векторы для работы.
Самое сложное это растр, который в х3 весит много, для этого используется picture source.
Обсуждалось уже и не раз.
Вам нужно заложить паузу в саму анимацию.
0 - 20% - выполнение анимации
20 - 100% - тут пауза
%% сами подгоняйте. https://jsfiddle.net/webirus/4fLzy30y/
