Задание в школе верстки Яндекса: http://dabblet.com/gist/3010941

dabblet.css

/*
	Задание: http://dabblet.com/gist/3010941
	Смотреть в хроме
*/

.card
{
	font-family: "PT Sans";

	position: relative;

	width: 700px;
	height: 320px;
	margin: 0 auto;

	background: #f1ecd0;
}

.card:after
{
  	position: absolute;
  
  	top: 80%;
  	bottom: 15px;
  	right: 10px;
  	left: auto;
  	z-index: -1;

	content: "";
  
  	width: 50%;
  	max-width: 300px;
  	
  	background: #777;
  	box-shadow: 0 15px 10px #bbb;
  	transform: rotate(3deg);
}

.close
{
	font-size: 2em;
	
	position: absolute;
	top: 5px;
	right: 13px; 
	
	color: #70693f;
	cursor: pointer;
}

.photo-chooser,
.texts div,
input
{
	position: absolute;
	top: -1000px;
	left: -1000px;
}

/* PHOTO CHOOSER */
.photo-chooser
{
	position: absolute;
	top: 60px;
	left: 60px;
	
	overflow: hidden;
	white-space: nowrap; /* понял, что нужно это свойство, после долгих поисков :( */

	width: 100px;
	height: 55px;
	padding-top: 110px;
	
	box-shadow: 0px 5px 20px 1px rgba(0, 0, 0, 0.3);
	border-radius: 10px;	
}

/* PHOTO */
.photos div
{
	display: inline-block;
}

.photos
{
	position: absolute;
	top: 0;
	left: 0;
	
	white-space: nowrap;

	transition: left .3s;
}

.photos img
{
	border-radius: 8px 8px 0 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; }

/* THUMBS */
label
{
	display: inline-block;
	
	padding: 5px;
	
	background: #474747;
}

label img
{
	cursor: pointer;
	border-radius: 5px;

}
#photo-1:checked~.photo-chooser label img,
#photo-2:checked~.photo-chooser label img,
#photo-3:checked~.photo-chooser label img,
#photo-4:checked~.photo-chooser label img,
#photo-5:checked~.photo-chooser label img,
#photo-6:checked~.photo-chooser label img
{
	box-shadow: 0px 0px 10px 3px rgba(255, 255, 255, 0.3);
}

/* TEXT */
.texts div
{
	opacity: 0;
	transition: opacity 1s;
}

#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
{
	font-size: .9em;
	
	position: static;

	padding: 50px 110px 0 180px;
	
	opacity: 1;
}

h1
{
	font-size: 1.5em;
	font-weight: normal;
}

h1:first-letter
{
	color: #fb0012;
}

/* ANIMATION RUNNER */
label:first-of-type
{
        animation: slider 5.5s infinite linear;
        animation-play-state: paused;
}

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

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

.animation-runner:hover ~ label:first-of-type
{
         animation-play-state: running;
}

@-webkit-keyframes slider
{
	
	50% { 
		margin-left: -142px; 
	}
}

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"}