Превращаемые фоновые секции

Отличный и оригинальный пример использования тега section. В этом примере страница разделена на 4 отзывчивых секции. В каждую из секций можно добавлять любую информацию. После клика по секции она откроется на все окно. Чтобы уменьшить секцию до исходного размера необходимо еще раз по ней кликнуть мышкой.

Для создания данного примера использовали CSS и немного скрипта, для работы которого необходимо подключить библиотеку jQuery.

Если есть вопросы, задавайте их в комментариях.

HTML

<div class="wrapper">
 <section class="section-1 section">

 </section>

 <section class="section-2 section">
 </section>

 <section class="section-3 section">

 </section>

 <section class="section-4 section">

 </section>
</div>

CSS

.section {
 background-size: cover;
 position: absolute;
 height: 100vh;
 width: 25vw;
 top: 0;
 overflow: hidden;
 -moz-transform: skew(-10deg, 0deg);
 -ms-transform: skew(-10deg, 0deg);
 -webkit-transform: skew(-10deg, 0deg);
 transform: skew(-10deg, 0deg);
 -moz-transition: all 300ms ease-out;
 -o-transition: all 300ms ease-out;
 -webkit-transition: all 300ms ease-out;
 transition: all 300ms ease-out;
 border-left: 5px solid white;
 border-right: 5px solid white;
 cursor: pointer;
}
.section::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -2;
 background-color: #3498db;
 -moz-transition: all 500ms ease-out;
 -o-transition: all 500ms ease-out;
 -webkit-transition: all 500ms ease-out;
 transition: all 500ms ease-out;
}
.section::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: -15%;
 background-position: center;
 background-size: 100%;
 background-repeat: no-repeat;
 width: 130%;
 height: 100%;
 opacity: 0.3;
 z-index: -1;
 -moz-transform: skew(10deg, 0deg);
 -ms-transform: skew(10deg, 0deg);
 -webkit-transform: skew(10deg, 0deg);
 transform: skew(10deg, 0deg);
 -moz-transition: all 300ms ease-out;
 -o-transition: all 300ms ease-out;
 -webkit-transition: all 300ms ease-out;
 transition: all 300ms ease-out;
 overflow: hidden;
}
.section:hover {
 width: 40%;
 z-index: 30;
}
.section:hover::after {
 background-size: 50%;
}
.section:hover:last-of-type {
 left: 63%;
}
.section.expanded {
 width: 100% !important;
 left: 0px;
 z-index: 100;
 -moz-transform: skew(0deg, 0deg);
 -ms-transform: skew(0deg, 0deg);
 -webkit-transform: skew(0deg, 0deg);
 transform: skew(0deg, 0deg);
}
.section.expanded::after {
 -moz-transform: skew(0deg, 0deg);
 -ms-transform: skew(0deg, 0deg);
 -webkit-transform: skew(0deg, 0deg);
 transform: skew(0deg, 0deg);
 background-size: 50%;
 background-position: left;
}
.section.expanded:hover:last-of-type {
 left: 0px;
}
.section.expanded:hover::after {
 background-size: 50%;
 background-position: left;
}

.section-1 {
 left: 0;
}
.section-1::before {
 background-color: #1db45d;
}
.section-1::after {
 background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/internships.svg");
}

.section-2 {
 left: 25%;
}
.section-2::before {
 background-color: #3498db;
}
.section-2::after {
 background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/mentor.svg");
}

.section-3 {
 left: 50%;
}
.section-3::before {
 background-color: #9b59b6;
}
.section-3::after {
 background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/ribbon.svg");
}

.section-4 {
 left: 75%;
}
.section-4::before {
 background-color: #f06d3a;
}
.section-4::after {
 background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/skills.svg");
}

JS

$('.section').on('click', function(){
 $(this).toggleClass('expanded');
})