[class^="scroll"] {
 position: relative;
 height: 7.5em;
 line-height: 7.5em;
 padding-top: 1px;
}
[class^="scroll"] input {
 display: none;
}
[class^="scroll"] div {
 overflow: hidden;
 white-space: nowrap;
 word-wrap: normal;
 height: 100%;
}
[class^="scroll"] img {
 position: relative;
 width: 20%;
 right: 0%;
 margin-left: 10px;
 transition: .7s;
 cursor: pointer;
}

[class^="scroll"] label {
 cursor: pointer;
 font-weight: 700;
 font-size: 3em;
}
[class^="scroll"] input:nth-of-type(1):checked ~ label:nth-of-type(2):after,
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(3):after,
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(4):after,
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(5):after,
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(6):after,
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(7):after,
[class^="scroll"] input:nth-of-type(7):checked ~ label:nth-of-type(1):after  {
 content: "\3009";
 position: absolute;
 right: 0;
 width: 70px;
background: #FFF;
opacity: 0.8;
z-index: 7;
color: #555;
text-align: center;
}
[class^="scroll"] input:nth-of-type(1):checked ~ label:nth-of-type(7):after,
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(1):after,
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(2):after,
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(3):after,
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(4):after,
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(5):after,
[class^="scroll"] input:nth-of-type(7):checked ~ label:nth-of-type(6):after {
 content: "\3008";
 position: absolute;
 left: 0;
 width: 70px;
background: #FFF;
opacity: 0.8;
z-index: 7;
color: #555;
text-align: center;
}

[class^="scroll"] input:nth-of-type(1):checked ~ div img {right: 1%;}
[class^="scroll"] input:nth-of-type(2):checked ~ div img {right: 20%;}
[class^="scroll"] input:nth-of-type(3):checked ~ div img {right: 40%;}
[class^="scroll"] input:nth-of-type(4):checked ~ div img {right: 60%;}
[class^="scroll"] input:nth-of-type(5):checked ~ div img {right: 80%;}
[class^="scroll"] input:nth-of-type(6):checked ~ div img {right: 100%;}
[class^="scroll"] input:nth-of-type(7):checked ~ div img {right: 120%;}