<section class="container">
<div class="section first">
<div class="cont_title">
<h1>Алания</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Расположен на северном склоне Центрального Кавказа.</p>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1>Зов<br>тигра</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Южная часть хребта Сихотэ-Алинь, горная система горы Облачная.</p>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1>Мещёра</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Расположен на территории Владимирской области.</p>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1>Таганай</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Северная часть горных хребтов Южного Урала.</p>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1>Угра</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Расположен в Калужской области, в долинах рек Угра, Жиздра, Высса и Ока.</p>
</div>
</div>
</section>
html, body {
margin: 0;
max-width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.section {
position: relative;
height: 100%;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
flex: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.cont_title {
position: relative;
margin: auto;
width: 100%;
height: 300px;
text-align: center;
margin-top: 30vh;
}
.cont_title h1 {
text-transform: uppercase;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
font-size: 3.5vw;
margin: 0;
vertical-align: middle;
}
.cont_title h3 {
text-transform: uppercase;
font-size: 1.3vw;
}
.cont_desc {
position: relative;
display: block;
text-align: center;
width: 60%;
height: auto;
margin: auto;
opacity: 0;
padding-top: 30px;
}
.cont_desc p {
margin: 0;
font-size: 20px;
}
.section:hover {
flex-grow: 1.8;
transition: flex 0.4s;
}
.section:hover > .cont_title h1 {
font-size: 5vw;
transition: font-size 0.4s;
}
.section:hover > .cont_title h3 {
font-size: 1.5vw;
transition: all 0.4s;
}
.section:hover > .cont_desc {
opacity: 1;
transition-delay: 0.5s;
transition: opacity 0.8s;
}
.section:nth-child(1) {
background-image: url("http://epic.spb.ru/demo/pic1.jpg");
}
.section:nth-child(2) {
background-image: url("http://epic.spb.ru/demo/pic2.jpg");
}
.section:nth-child(3) {
background-image: url("http://epic.spb.ru/demo/pic3.jpg");
}
.section:nth-child(4) {
background-image: url("http://epic.spb.ru/demo/pic4.jpg");
}
.section:nth-child(5) {
background-image: url("http://epic.spb.ru/demo/pic5.jpg");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.