Html Code: HTML Photo Slider with Frame

The following code is a beautiful slider with a frame around it that looks like a painting. To change the slides, hover a photo inside the frame and click on the circular buttons that are displayed. The photo changes and goes to your selected one. Enjoy!
<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<style>
* {
    margin: 0;
    padding: 0;
}

html {
    background-color: #eefbf8;
    background-image: radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%);
    background-position: 50% 75%, 50% 50%;
    background-repeat: no-repeat, repeat;
    background-size: 150% 150%, 3em 3em;
    font-size: 100%;
    min-height: 100%;
}
/**********/
/* Slider */
/**********/

.slider {
    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: 14.75em;
    left: 64%;
    margin: -9.875em -13em;
    padding: .5em;
    position: absolute;
    top: 56%;
    width: 18em;
}

    /* Frame */

.slider:before {
    background-color: #22130c;
    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;
}

/* Mat */

.slider: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;
}

/* Slides */

.slider li {
    box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
    list-style: none;
    position: absolute;
}

.slider input {
    display: none;
}

/* Navigation */

.slider 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 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:hover label {
    opacity: 1;
    visibility: visible;
}

.slider input:checked + label {
    background-color: #fff;
}

.slider:hover li:nth-child(1) label {
    left: .5em;
}

.slider:hover li:nth-child(2) label {
    left: 2em;
}

.slider:hover li:nth-child(3) label {
    left: 3.5em;
}

.slider:hover li:nth-child(4) label {
    left: 5em;
}

/* Images */

.slider img {
    height: 14.75em;
    opacity: 0;
    transition: .25s;
    width: 18em;
    vertical-align: top;
    visibility: hidden;
}

.slider li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}


</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>


<ul class="slider">
    <li>
        <input type="radio" id="slide1" name="slide" checked>
        <label for="slide1"></label>
        <img src="https://www.htmlbestcodes.com/files/slider-b1.jpg" alt="Panel 1">
    </li>
    <li>
        <input type="radio" id="slide2" name="slide">
        <label for="slide2"></label>
       <img src="https://www.htmlbestcodes.com/files/slider-b2.jpg" alt="Panel 2">
    </li>
    <li>
        <input type="radio" id="slide3" name="slide">
        <label for="slide3"></label>
        <img src="https://www.htmlbestcodes.com/files/slider-b3.jpg" alt="Panel 3">
    </li>
    <li>
        <input type="radio" id="slide4" name="slide">
        <label for="slide4"></label>
        <img src="https://www.htmlbestcodes.com/files/slider-b4.jpg" alt="Panel 4">
    </li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><a target="_blank" href="https://www.htmlbestcodes.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Best Codes</a>
If you don't know how to use this code or need more information Click here!
Html Best Codes

Html Code: HTML Photo Slider with Frame

Links
