Слайдер в виде картины

Доброго времени суток, друзья. Предлагаю вам сегодня слайдер в виде картины с рамкой и красивым hover эффектом. При наведении курсора появляются кнопки навигации. Код рассчитан на 4 изображения. Без подключения всяких библиотек, на чистом CSS.

Изменяя именно эти стили, вы сможете создать свой вариант рамки. 

А пока просто скопируйте предложенный код и установите его в этом редакторе для просмотра

Код

<ul class="slider_picture">
    <li>
        <input type="radio" id="slide1" name="slide" checked="">
        <label for="slide1"></label>
        <img src="https://1.bp.blogspot.com/-c5WhHzMtp7I/XvxT7Vb4C5I/AAAAAAAAN30/FgsR3FDkBxc1LKwb4sPm8upqUU2cUd9BgCLcBGAsYHQ/s320/404.jpg" alt=" ">
    </li>
    <li>
        <input type="radio" id="slide2" name="slide">
        <label for="slide2"></label>
        <img src="https://1.bp.blogspot.com/-CKVoPPWefWg/XvykUkaB70I/AAAAAAAAN4s/WmbJwXJaU00c3-LJLhTqV0lM-kh8lUIAgCLcBGAsYHQ/s320/404.jpg" alt=" ">
    </li>
    <li>
        <input type="radio" id="slide3" name="slide">
        <label for="slide3"></label>
        <img src="https://1.bp.blogspot.com/-ClqZp0F0EhI/Xvxaj_bGmWI/AAAAAAAAN4A/9SJLgOAwge8FSLxEmL7xUqii6_K6zovfgCLcBGAsYHQ/s1600/404.jpg" alt=" ">
    </li>
    <li>
        <input type="radio" id="slide4" name="slide">
        <label for="slide4"></label>
        <img src="https://1.bp.blogspot.com/-r_qLer5dx_Y/XvymH0FKf5I/AAAAAAAAN44/kR7CObqOI-UBVHgI5nk3wYkzP-ntkW8dgCLcBGAsYHQ/s1600/404.jpg" alt=" ">
    </li>
</ul> <style>
.slider_picture{background-color:#fff;box-shadow:inset 0 0 2px hsla(0,0%,0%,.2),0 3px 1px hsla(0,0%,100%,.75),0 -1px 1px 2px hsla(0,0%,0%,.1);height:18.75em;left:50%;margin:-9.875em -13em;padding:.5em;position:absolute;top:50%;width:25em}
.slider_picture:before{background-color:#800000;bottom:-2.5em;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.2),inset 0 -2px 1px hsla(0,0%,0%,.4),0 5px 50px hsla(0,0%,0%,.25),0 20px 20px -15px hsla(0,0%,0%,.2),0 30px 20px -15px hsla(0,0%,0%,.15),0 40px 20px -15px hsla(0,0%,0%,.1);content:'';left:-2.5em;position:absolute;right:-2.5em;top:-2.5em;z-index:-1}
.slider_picture:after{background-color:#fff5e5;bottom:-1.5em;box-shadow:0 2px 1px hsla(0,0%,100%,.2),0 -1px 1px 1px hsla(0,0%,0%,.4),inset 0 2px 3px 1px hsla(0,0%,0%,.2),inset 0 4px 3px 1px hsla(0,0%,0%,.2),inset 0 6px 3px 1px hsla(0,0%,0%,.1);content:'';left:-1.5em;position:absolute;right:-1.5em;top:-1.5em;z-index:-1}
.slider_picture li{box-shadow:0 -1px 0 2px hsla(0,0%,0%,.03);list-style:none;position:absolute}
.slider_picture input{display:none}
.slider_picture label{background-color:#111;background-image:linear-gradient(transparent,hsla(0,0%,0%,.25));border:.2em solid transparent;bottom:.5em;border-radius:100%;cursor:pointer;display:block;height:.5em;left:24em;opacity:0;position:absolute;transition:.25s;width:.5em;visibility:hidden;z-index:10}
.slider_picture label:after{border-radius:100%;bottom:-.2em;box-shadow:inset 0 0 0 .2em #111,inset 0 2px 2px #000,0 1px 1px hsla(0,0%,100%,.25);content:'';left:-.2em;position:absolute;right:-.2em;top:-.2em}
.slider_picture:hover label{opacity:1;visibility:visible}
.slider_picture input:checked + label{background-color:#fff}
.slider_picture:hover li:nth-child(1) label{left:.5em}
.slider_picture:hover li:nth-child(2) label{left:2em}
.slider_picture:hover li:nth-child(3) label{left:3.5em}
.slider_picture:hover li:nth-child(4) label{left:5em}
.slider_picture img{height:18.75em;opacity:0;transition:.25s;width:25em;vertical-align:top;visibility:hidden}
.slider_picture li input:checked ~ img{opacity:1;visibility:visible;z-index:10}</style>

Замените строки , выделенные цветом, на адреса ваших картинок. Поэкспериментируйте со значениями background (цветом фона), значениями box-shadow, , которое задаёт тень блокам. Для тона и насыщенности  в коде используется цвета в формате hsla. 

Вроде, кака и все настройки. Код достаточно лёгкий. Можно смело установить в самом сообщении, перейдя в формат HTML при написании сообщения или в гаджет HTML/JavaScript в любом месте макета блога.

Можно сделать ещё слайдер видео в блоге.

 Всем добра и до встречи.