Резиновый красивый слайдер на flex

Есть четыре картинки, например, времена года.

Если мы наводим мышкой на изображение, оно разворачивается и занимает большее пространство.

Сделаем слайдер на flex верстке.

Для начала зададим каркас.

Напишем див с классом slider, внутри будут item с четырьмя картинками pic1,2,3,4.

Текст к item ,зададим лето, осень, зима и весна внутри тега span.

Стилизуем слайдер на flex.

Укажем классу slider свойство display: flex.

В центре сделаем

justify-content: center.

align-items: center.

Перейдем к классу item и добавим фиолетовую рамку border: 3px solid #b641b0.

Все элементы делаем display: flex и по центру.

Высота элементов будет во весь экран height: 100vh.

Каждый элемент будет занимать 25 процентов экрана flex-basis: 25%.

Когда будет наводит мышкой &:hover на элемент item его размер будет увеличиваться до flex-basis: 75%.

Добавим плавности изменения свойством transition: all .5s.

Сделаем текст в теге span белого цвета и размер установим font-size: 5rem.

Установим у текста синюю тень text-shadow: 0px 0px 30px blue.

Добавим картинки к классу pic.

Для первого изображения пропишем путь background-image: url («.../img/11.jpg») и сделаем во всю ширину background-size: cover, остальные pic продублируем по порядку.

Проверяем в браузере, получился резиновый слайдер, под любой размер экрана.

Адаптируем слайдер к маленьким экранам.

Сделаем slider по горизонтали.

Зайдем в файл media.sass и для экранов @media only screen and (max-width : 768px) применим свойство к слайдеру порядок следования элементов flex-flow: column.

Для item делаем ширину сто процентов. Высоту height: 25%.

При наведении flex-grow: 30%

Код в media.sass.