лучше уточнять, мало ли какой input в интерфейсе появится

dabblet.css

input
{
/* лучше уточнять, мало ли какой input в интерфейсе появится */
    display: none;
}

@-webkit-keyframes 'pulse'
{
    0%   {
        -webkit-transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-120px, 0);
    }
}


.text-1, .text-2, .text-3,
.text-4, .text-5, .text-6
{
    opacity: 0;
    /* ты таким образом завязываешься на высоту,
    прийдется при большом тексте менять высоту контейнера */
    position: absolute;
    left: 160px;
    
/* лучше объединить */    
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.5s;
}




#photo-1:checked ~ .photo-chooser .photos { left: 0; }
#photo-2:checked ~ .photo-chooser .photos { left: -100px; }
#photo-3:checked ~ .photo-chooser .photos { left: -200px; }
#photo-4:checked ~ .photo-chooser .photos { left: -300px; }
#photo-5:checked ~ .photo-chooser .photos { left: -400px; }
#photo-6:checked ~ .photo-chooser .photos { left: -500px; }


#photo-1:checked ~ .photo-chooser label[for='photo-1'] img,
#photo-2:checked ~ .photo-chooser label[for='photo-2'] img,
#photo-3:checked ~ .photo-chooser label[for='photo-3'] img,
#photo-4:checked ~ .photo-chooser label[for='photo-4'] img,
#photo-5:checked ~ .photo-chooser label[for='photo-5'] img,
#photo-6:checked ~ .photo-chooser label[for='photo-6'] img
{
    box-shadow: 0 0 1px 1px #fff;
}




#photo-1:checked ~ .texts .text-1,
#photo-2:checked ~ .texts .text-2,
#photo-3:checked ~ .texts .text-3,
#photo-4:checked ~ .texts .text-4,
#photo-5:checked ~ .texts .text-5,
#photo-6:checked ~ .texts .text-6
{
    opacity: 1;
}




.card
{
    width: 600px;
/* вот и высота, хорошо бы не завязываться на нее */
    height: 200px;
    padding: 40px;
    margin: 100px auto 0;
    position: relative;
    background: #e0b184;
}


.card:after
{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    right: 10px;
    left: auto;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: #777;


    -webkit-box-shadow: 0 15px 15px #777;
    -moz-box-shadow: 0 15px 15px #777;
    box-shadow: 0 15px 15px #777;


    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}


.close
{
    font: 30px/20px Arial;
    color: #a53900;
/* тень это три параметра кроме цвета */
    text-shadow: -1px -1px #000;
    position: absolute;
    top: 8px;
    right: 8px;
}




.photo-chooser
{
    position: absolute;
}


.texts h1, .texts p
{
}


h1
{
    font: bold 20px/20px 'PT Sans', sans-serif;
    margin: 0 auto 20px;
}


h1:first-letter
{
    color: red;
}


p
{
    font: 13px/17px 'PT Sans' sans-serif;
}


.photo-chooser
{
    width: 100px;
    background: #555;
    white-space: nowrap;
    overflow: hidden;
    height: 146px;
    border-radius: 10px 10px 10px 10px;
/* а тут аж 4*/
    box-shadow:  0 2px 10px -2px #222;
}


label
{
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 4px 5px 2px 2px;
    cursor: pointer;
    position: relative;
    top: 100px;
}


label img
{
    border-radius: 2px;
}


.photo-1, .photo-2, .photo-3,
.photo-4, .photo-5, .photo-6
{
    max-width: 100px;
    max-height: 100px;
    display: inline-block;
}


.photos
{
    border-radius: 8px 8px 0 0;
}


.photos
{
    position: absolute;
    top: 0;
    -webkit-transition-property: left;
    -webkit-transition-duration: 0.2s;
}


.photos img
{
    border-radius: 8px 8px 0 0;
}


label img
{
    max-width: 30px;
    max-height: 30px;
}


.animation-runner
{
    width: 100%;
    height: 8px;
    background: #777;
    position: absolute;
    border-radius: 0px 0px 8px 8px;
    cursor: pointer;
    bottom: 0;
}




.animation-runner:hover
{
    background: #999;
}


.animation-runner ~ label
{

/* хорошо бы склеить */
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: paused;
}


.animation-runner:hover ~ label
{
    -webkit-animation-play-state: running;
}

dabblet.html

    <div class="card">
        <span class="close">×</span>

        <input type="radio" id="photo-1" name="photo" checked>
        <input type="radio" id="photo-2" name="photo">
        <input type="radio" id="photo-3" name="photo">
        <input type="radio" id="photo-4" name="photo">
        <input type="radio" id="photo-5" name="photo">
        <input type="radio" id="photo-6" name="photo">


        <div class="photo-chooser">
            <div class="animation-runner"></div>
            <label for="photo-1">
                <img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/30/square.jpg" alt="tyv@">
            </label
            ><label for="photo-2">
                <img src="http://center.yandex-team.ru/api/v1/user/nop/photo/30/square.jpg" alt="nop@">
            </label
            ><label for="photo-3">
                <img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/30/square.jpg" alt="shirokoff@">
            </label
            ><label for="photo-4">
                <img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/30/square.jpg" alt="aandrosov@">
            </label
            ><label for="photo-5">
                <img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/30/square.jpg" alt="dfilatov@">
            </label
            ><label for="photo-6">
                <img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/30/square.jpg" alt="panyakor@">
            </label>

            <div class="photos">
                <div class="photo-1">
                    <img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/100/square.jpg" alt="tyv@">
                </div
                ><div class="photo-2">
                    <img src="http://center.yandex-team.ru/api/v1/user/nop/photo/100/square.jpg" alt="nop@">
                </div
                ><div class="photo-3">
                    <img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/100/square.jpg" alt="shirokoff@">
                </div
                ><div class="photo-4">
                    <img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/100/square.jpg" alt="aandrosov@">
                </div
                ><div class="photo-5">
                    <img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/100/square.jpg" alt="dfilatov@">
                </div
                ><div class="photo-6">
                    <img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/100/square.jpg" alt="panyakor@">
                </div>
            </div>
        </div>

        <div class="texts">
            <div class="text-1">
                <h1>Юра Ткаченко</h1>
                <p>
                    Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.
                </p>
                <p>
                    Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам.
                </p>
            </div>
            <div class="text-2">
                <h1>Сергей Никитин</h1>
                <p>
                    Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
                </p>
            </div>
            <div class="text-3">
                <h1>Иван Широков</h1>
                <p>
                    Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
                </p>
            </div>
            <div class="text-4">
                <h1>Алексей Андросов</h1>
                <p>
                    Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
                </p>
            </div>
            <div class="text-5">
                <h1>Дмитрий Филатов</h1>
                <p>
                    Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
                </p>
            </div>
            <div class="text-6">
                <h1>Михаил Корепанов</h1>
                <p>
                    Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
                </p>
            </div>
        </div>
    </div>

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}