<div class="container">
<section class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1"></label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2"></label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3"></label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4"></label>
<input id="select-img-5" name="radio-set-1" type="radio" class="cr-selector-img-5" >
<label for="select-img-5" class="cr-label-img-5"></label>
<input id="select-img-6" name="radio-set-1" type="radio" class="cr-selector-img-6" />
<label for="select-img-6" class="cr-label-img-6"></label>
<input id="select-img-7" name="radio-set-1" type="radio" class="cr-selector-img-7" />
<label for="select-img-7" class="cr-label-img-7"></label>
<input id="select-img-8" name="radio-set-1" type="radio" class="cr-selector-img-8" />
<label for="select-img-8" class="cr-label-img-8"></label>
<div class="clr"></div>
<div class="cr-bgimg">
<div> <span><img src="img/Action/Mo.jpg" style="margin:0px 0px 0px 0px"/></span> <span><img src="img/Action/Tu.jpg" style="margin:0px 0px 0px 0px"/></span> <span><img src="img/Action/We.jpg" style="margin:0px 0px 0px 0px"/></span> <span><img src="img/Action/Th.jpg" style="margin:0px 0px 0px 0px"/></span> <span><img src="img/Action/Fr-San.jpg" style="margin:0px 0px 0px 0px"/></span> <span><img src="img/Action/St.jpg" style="margin:0px 0px 0px 0px"/></span> <span><img src="img/Action/evryd.jpg" style="margin:0px 0px 0px 0px"/></span> <span><img src="img/Action/evryd2.jpg" style="margin:0px 0px 0px 0px"/></span> </div>
<div> <span><img src="img/Action/Mo.jpg" style="margin:0px 0px 0px -50px"/></span> <span><img src="img/Action/Tu.jpg" style="margin:0px 0px 0px -50px"/></span> <span><img src="img/Action/We.jpg" style="margin:0px 0px 0px -50px"/></span> <span><img src="img/Action/Th.jpg" style="margin:0px 0px 0px -50px"/></span> <span><img src="img/Action/Fr-San.jpg" style="margin:0px 0px 0px -50px"/></span> <span><img src="img/Action/St.jpg" style="margin:0px 0px 0px -50px"/></span> <span><img src="img/Action/evryd.jpg" style="margin:0px 0px 0px -50px"/></span> <span><img src="img/Action/evryd2.jpg" style="margin:0px 0px 0px -50px"/></span> </div>
<div> <span><img src="img/Action/Mo.jpg" style="margin:0px 0px 0px -100px"/></span> <span><img src="img/Action/Tu.jpg" style="margin:0px 0px 0px -100px"/></span> <span><img src="img/Action/We.jpg" style="margin:0px 0px 0px -100px"/></span> <span><img src="img/Action/Th.jpg" style="margin:0px 0px 0px -100px"/></span> <span><img src="img/Action/Fr-San.jpg" style="margin:0px 0px 0px -100px"/></span> <span><img src="img/Action/St.jpg" style="margin:0px 0px 0px -100px"/></span> <span><img src="img/Action/evryd.jpg" style="margin:0px 0px 0px -100px"/></span> <span><img src="img/Action/evryd2.jpg" style="margin:0px 0px 0px -100px"/></span> </div>
<div> <span><img src="img/Action/Mo.jpg" style="margin:0px 0px 0px -150px"/></span> <span><img src="img/Action/Tu.jpg" style="margin:0px 0px 0px -150px"/></span> <span><img src="img/Action/We.jpg" style="margin:0px 0px 0px -150px"/></span> <span><img src="img/Action/Th.jpg" style="margin:0px 0px 0px -150px"/></span> <span><img src="img/Action/Fr-San.jpg" style="margin:0px 0px 0px -150px"/></span> <span><img src="img/Action/St.jpg" style="margin:0px 0px 0px -150px"/></span> <span><img src="img/Action/evryd.jpg" style="margin:0px 0px 0px -150px"/></span> <span><img src="img/Action/evryd2.jpg" style="margin:0px 0px 0px -150px"/></span> </div>
<div> <span><img src="img/Action/Mo.jpg" style="margin:0px 0px 0px -200px"/></span> <span><img src="img/Action/Tu.jpg" style="margin:0px 0px 0px -200px"/></span> <span><img src="img/Action/We.jpg" style="margin:0px 0px 0px -200px"/></span> <span><img src="img/Action/Th.jpg" style="margin:0px 0px 0px -200px"/></span> <span><img src="img/Action/Fr-San.jpg" style="margin:0px 0px 0px -200px"/></span> <span><img src="img/Action/St.jpg" style="margin:0px 0px 0px -200px"/></span> <span><img src="img/Action/evryd.jpg" style="margin:0px 0px 0px -200px"/></span> <span><img src="img/Action/evryd2.jpg" style="margin:0px 0px 0px -200px"/></span> </div>
<div> <span><img src="img/Action/Mo.jpg" style="margin:0px 0px 0px -250px"/></span> <span><img src="img/Action/Tu.jpg" style="margin:0px 0px 0px -250px"/></span> <span><img src="img/Action/We.jpg" style="margin:0px 0px 0px -250px"/></span> <span><img src="img/Action/Th.jpg" style="margin:0px 0px 0px -250px"/></span> <span><img src="img/Action/Fr-San.jpg" style="margin:0px 0px 0px -250px"/></span> <span><img src="img/Action/St.jpg" style="margin:0px 0px 0px -250px"/></span> <span><img src="img/Action/evryd.jpg" style="margin:0px 0px 0px -250px"/></span> <span><img src="img/Action/evryd2.jpg" style="margin:0px 0px 0px -250px"/></span> </div>
<div> <span><img src="img/Action/Mo.jpg" style="margin:0px 0px 0px -300px"/></span> <span><img src="img/Action/Tu.jpg" style="margin:0px 0px 0px -300px"/></span> <span><img src="img/Action/We.jpg" style="margin:0px 0px 0px -300px"/></span> <span><img src="img/Action/Th.jpg" style="margin:0px 0px 0px -300px"/></span> <span><img src="img/Action/Fr-San.jpg" style="margin:0px 0px 0px -300px"/></span> <span><img src="img/Action/St.jpg" style="margin:0px 0px 0px -300px"/></span> <span><img src="img/Action/evryd.jpg" style="margin:0px 0px 0px -300px"/></span> <span><img src="img/Action/evryd2.jpg" style="margin:0px 0px 0px -300px"/></span> </div>
<div> <span><img src="img/Action/Mo.jpg" style="margin:0px 0px 0px -350px"/></span> <span><img src="img/Action/Tu.jpg" style="margin:0px 0px 0px -350px"/></span> <span><img src="img/Action/We.jpg" style="margin:0px 0px 0px -350px"/></span> <span><img src="img/Action/Th.jpg" style="margin:0px 0px 0px -350px"/></span> <span><img src="img/Action/Fr-San.jpg" style="margin:0px 0px 0px -350px"/></span> <span><img src="img/Action/St.jpg" style="margin:0px 0px 0px -350px"/></span> <span><img src="img/Action/evryd.jpg" style="margin:0px 0px 0px -350px"/></span> <span><img src="img/Action/evryd2.jpg" style="margin:0px 0px 0px -350px"/></span> </div>
</div>
<div class="cr-titles">
<h3><span></span><span></span></h3>
<h3><span></span><span></span></h3>
<h3><span></span><span></span></h3>
<h3><span></span><span></span></h3>
<h3><span></span><span></span></h3>
<h3><span></span><span></span></h3>
<h3><span></span><span></span></h3>
<h3><span></span><span></span></h3>
</div>
</section>
</div>
</div>
</div>

.cr-container {
text-align:center;
width:400px;
height:400px;
position: relative;
margin:-14px 0px 0px 0px;
padding:0px;
}
.cr-container label {
font-style: italic;
width:17px;
height:17px;
cursor: pointer;
color:;
line-height: 32px;
font-size: 24px;
float:left;
position:relative;
margin-top:405px;
margin-right:0px;
z-index: 1000;
}
.cr-container label:before {
content:'';
width:16px;
height: 16px;
background:url(../img/click2.png) no-repeat -2px -1px;
position: absolute;
top:0px;
left:50%;
margin-left:-8px;
border-radius: 50%;
z-index:50;
}
/*.cr-container label:after {
width: 2px;
height: 333px;
content: '';
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(116, 2, 112, 0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(116, 2, 112, 0.5)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(116, 2, 112, 0.5) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(116, 2, 112, 0.5) 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(116, 2, 112, 0.5) 100%);
background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(116, 2, 112, 0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 );
position: absolute;
bottom: 45px;
right: 0px;
}*/
.cr-container label.cr-label-img-8:after {
width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1),
.cr-container input.cr-selector-img-5:checked ~ .cr-titles h3:nth-child(5) span:nth-child(1),
.cr-container input.cr-selector-img-6:checked ~ .cr-titles h3:nth-child(6) span:nth-child(1),
.cr-container input.cr-selector-img-7:checked ~ .cr-titles h3:nth-child(7) span:nth-child(1),
.cr-container input.cr-selector-img-8:checked ~ .cr-titles h3:nth-child(8) span:nth-child(1){
color: blue;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before,
.cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5:before,
.cr-container input.cr-selector-img-6:checked ~ label.cr-label-img-6:before,
.cr-container input.cr-selector-img-7:checked ~ label.cr-label-img-7:before,
.cr-container input.cr-selector-img-8:checked ~ label.cr-label-img-8:before{
background: url(../img/click.png) no-repeat -2px -1px;
}
.cr-container input {
display: none;
}
.cr-bgimg {
width: 400px;
height: 400px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
border:1px solid #F00;
}
.cr-bgimg {
background-repeat: no-repeat;
background-position: 0 0;
}
.cr-bgimg div {
width: 50px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
.cr-bgimg div span {
position: absolute;
width: 100%;
height: 100%;
top: 400px;
left: 0px;
z-index: 2;
}
.cr-bgimg div:nth-child(even) span {
top: -400px;
}
.cr-container input:checked ~ .cr-bgimg div span{
-webkit-animation: slideOutUp 0.6s ease-in-out;
-moz-animation: slideOutUp 0.6s ease-in-out;
-o-animation: slideOutUp 0.6s ease-in-out;
-ms-animation: slideOutUp 0.6s ease-in-out;
animation: slideOutUp 0.6s ease-in-out;
}
.cr-container input:checked ~ .cr-bgimg div:nth-child(even) span {
-webkit-animation: slideOutDown 0.6s ease-in-out;
-moz-animation: slideOutDown 0.6s ease-in-out;
-o-animation: slideOutDown 0.6s ease-in-out;
-ms-animation: slideOutDown 0.6s ease-in-out;
animation: slideOutDown 0.6s ease-in-out;
}
@-webkit-keyframes slideOutUp {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes slideOutDown {
0% {
top: 0px;
}
100% {
top: 400px;
}
}
@-moz-keyframes slideOutUp {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-moz-keyframes slideOutDown {
0% {
top: 0px;
}
100% {
top: 400px;
}
}
@-o-keyframes slideOutUp {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-o-keyframes slideOutDown {
0% {
top: 0px;
}
100% {
top: 400px;
}
}
@-ms-keyframes slideOutUp {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-ms-keyframes slideOutDown {
0% {
top: 0px;
}
100% {
top: 400px;
}
}
@keyframes slideOutUp {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes slideOutDown {
0% {
top: 0px;
}
100% {
top: 400px;
}
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4), .cr-container input.cr-selector-img-5:checked ~ .cr-bgimg div span:nth-child(5), .cr-container input.cr-selector-img-6:checked ~ .cr-bgimg div span:nth-child(6), .cr-container input.cr-selector-img-7:checked ~ .cr-bgimg div span:nth-child(7), .cr-container input.cr-selector-img-8:checked ~ .cr-bgimg div span:nth-child(8) {
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
top: 0px;
z-index: 10;
}
/*.cr-titles h3 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.cr-titles h3 span {
z-index: 10000;
position: absolute;
width: 100%;
left: 0px;
text-align: center;
opacity: 0;
top:30px;
;
}
.cr-titles h3 span:nth-child(1) {
left: 0px;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 30px;
letter-spacing: 7px;
color: transparent;
text-shadow: 0px 0px 10px #fff;
-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(2) {
margin-top: 84px;
letter-spacing: 0px;
background: rgba(104, 171, 194, 0.9);
font-size: 14px;
padding: 10px 0px;
font-style: italic;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.cr-container input:checked ~ .cr-titles h3 span {
opacity: 0;
text-shadow: 0px 0px 30px #fff;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1), .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1), .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1), .cr-container input.cr-selector-img-5:checked ~ .cr-titles h3:nth-child(5) span:nth-child(1), .cr-container input.cr-selector-img-6:checked ~ .cr-titles h3:nth-child(6) span:nth-child(1), .cr-container input.cr-selector-img-7:checked ~ .cr-titles h3:nth-child(7) span:nth-child(1), .cr-container input.cr-selector-img-8:checked ~ .cr-titles h3:nth-child(8) span:nth-child(1) {
opacity: 1;
text-shadow: 0px 0px 2px #ff00ea;
}*/
/*.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
opacity: 0.6;
}*/
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
.cr-container input {
display: inline;
width: 24%;
margin-top: 350px;
z-index: 1000;
position: relative;
}
.cr-container label {
display: none;
}
}