есть фоновая картинка. на ней три надписи. под надписями стрелки вниз. при нажатии на стрелку фон должен как бы разрезаться под кнопкой стрелки (при этом фон остается прежним по структуре. т.е. часть просто съезжает ниже, а на месте разреза на всю ширину фона вставляется белый блок) . и на месте разреза появляется блок с определенной информацией. как реализовать данную задумку???
вот html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>разрез фона</title>
<style>
header {
background-image: url(http://www.entheosweb.com/images/backgrounds/blue/lines.jpg);
background-repeat: none;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
color: red;
}
header .intro-text {
padding-top: 100px;
padding-bottom: 50px
}
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 22px;
line-height: 22px;
margin-bottom: 25px
}
header .intro-text .intro-heading {
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 50px;
line-height: 50px;
margin-bottom: 25px
}
@media (min-width:768px) {
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 40px;
line-height: 40px;
margin-bottom: 25px
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">первая секция</div>
<a href="#"class="arrow-down"><img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"></a>
<div class="intro-lead-in">вторая секция</div>
<a href="#"class="arrow-down"><img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"></a>
<div class="intro-lead-in">третья секция</div>
<a href="#"class="arrow-down"><img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"></a>
</div>
</div>
</header>
</body>
</html>