在同一页面上多次使用叠加效果，内容不同（纯CSS）

Question

我想使用并适应我的需要这个纯粹的CSS叠加效果：

我需要在同一页面上使用此效果三次，当我点击时使用不同的内容，我该如何分开它们？当我只是复制整个DIV并更改内容时，只有最后一个内容将应用于三个DIV

HTML

<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

CSS

@import "http://webfonts.ru/import/notcourier.css";
body{   
background:url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower{
  width:340px;
  margin:10% auto;
  padding:50px;
  background:white;
  opacity:0.8;
  color:black;
  box-shadow:inset 0 0 0 1px black;
  border:30px solid white;
}

.lower:hover{
  background:black;
  color:white;
  box-shadow:inset 0 0 0 1px white;
  border:30px solid black;
}
input{
  display:none;
}

.lower label{
  font-family: 'NotCourierSans';
  text-transform:uppercase;
  font-size:40px;
  text-align:center;
}

.lower label:hover{
  cursor:pointer;
}

.overlay{
                position: fixed;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background: rgba(0,0,0,0.9);
}

.overlay label{
                width: 58px;
                height:58px;
                position: absolute;
                right: 20px;
                top: 20px;
                background:     url('http://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
                z-index: 100;
  cursor:pointer;
}

.overlay nav {
                text-align: center;
                position: relative;
                top: 50%;
                height: 60%;
                font-size: 54px;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
}

.overlay ul {
                list-style: none;
                padding: 0;
                margin: 0 auto;
                display: inline-block;
                height: 100%;
                position: relative;
}

.overlay ul li {
                display: block;
                height: 20%;
                height: calc(100% / 5);
                min-height: 54px;
}

.overlay ul li a {
                font-weight: 300;
                display: block;
                color: white;
  text-decoration:none;
                -webkit-transition: color 0.2s;
                transition: color 0.2s;
  font-family: 'NotCourierSans';
  text-transform:uppercase;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
                color: #849368;
}

.lower~.overlay-hugeinc{
                opacity: 0;
                visibility: hidden;
                -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
                transition: opacity 0.5s, visibility 0s 0.5s;
}

#op:checked~.overlay-hugeinc{
                opacity: 1;
                visibility: visible;
                -webkit-transition: opacity 0.5s;
                transition: opacity 0.5s;
}

.overlay-hugeinc nav {
                -moz-perspective: 300px;
}

.overlay-hugeinc nav ul {
                opacity: 0.4;
                -webkit-transform: translateY(-25%) rotateX(35deg);
                transform: translateY(-25%) rotateX(35deg);
                -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
                transition: transform 0.5s, opacity 0.5s;
}

    #op:checked~.overlay-hugeinc nav ul {
                    opacity: 1;
                    -webkit-transform: rotateX(0deg);
                    transform: rotateX(0deg);
   }

    #op:not(:checked)~.overlay-hugeinc nav ul {
                   -webkit-transform: translateY(25%) rotateX(-35deg);
                transform: translateY(25%) rotateX(-35deg);
}