Евгений Полинов

<div class="wrapper">
                    <input type="radio" name="point" id="slide1" checked>
                    <input type="radio" name="point" id="slide2">
                    <input type="radio" name="point" id="slide3">
                    <input type="radio" name="point" id="slide4">
                    <input type="radio" name="point" id="slide5">
                    <div class="slider">
                        <div class="slides slide1"><img src="/src/img/MyCollages (1).jpg" alt=""></div>
                        <div class="slides slide2"><img src="img/MyCollages (2).jpg" alt=""></div>
                        <div class="slides slide3"><img src="/src/img/MyCollages (4).jpg" alt=""></div>
                        <div class="slides slide4"><img src="/src/img/единомышленники.jpg" alt=""></div>
                    </div>	
                    <div class="controls">
                        <label for="slide1"></label>
                        <label for="slide2"></label>
                        <label for="slide3"></label>
                        <label for="slide4"></label>
                    </div>
                </div>

.wrapper
    height: 685px
    margin: 00px auto 0
    position: relative
    width: 920px
    margin-bottom: 40px
.controls
    left: 50%
    margin-left: -108px
    position: absolute
    label
        cursor: pointer
        display: inline-block
        height: 16px
        margin: 25px 12px 0 16px
        position: relative
        width: 16px
        -webkit-border-radius: 50%
        -moz-border-radius: 50%
        -o-border-radius: 50%
        border-radius: 50%
        -webkit-transition: background ease-in-out .5s
        -moz-transition: background ease-in-out .5s
        -o-transition: background ease-in-out .5s
        transition: background ease-in-out .5s
        &:after
            border: 4px solid #fdfdfd
            content: " "
            display: block
            height: 12px
            left: -4px
            position: absolute
            top: -4px
            width: 12px
            -webkit-border-radius: 50%
            -moz-border-radius: 50%
            -o-border-radius: 50%
            border-radius: 50%
        &:hover, 
        #slide1:checked ~ .controls label:nth-of-type(1),
        #slide2:checked ~ .controls label:nth-of-type(2),
        #slide3:checked ~ .controls label:nth-of-type(3),
        #slide4:checked ~ .controls label:nth-of-type(4)
            background: #ffffff

.slider 
    border-radius: 150px
    background-color: #fafafa
    height: inherit
    overflow: hidden
    position: relative
    width: inherit
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5)
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5)
    -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5)
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)

.wrapper > input 
    display: none
.slides
    height: inherit
    position: absolute
    width: inherit

.slides
    height: inherit
    opacity: 0
    position: absolute
    width: inherit
    z-index: 0
    -webkit-transform: scale(1.5)
    -moz-transform: scale(1.5)
    -o-transform: scale(1.5)
    transform: scale(1.5)
    -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s
    -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s
    -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s
    transition: transform ease-in-out .5s, opacity ease-in-out .5s


#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5
    opacity: 1
    z-index: 1
    -webkit-transform: scale(1)
    -moz-transform: scale(1)
    -o-transform: scale(1)
    transform: scale(1)