<div class="container">
<input type="radio" name="slide-control" id="goto-slide-1" checked>
<input type="radio" name="slide-control" id="goto-slide-2">
<input type="radio" name="slide-control" id="goto-slide-3">
<input type="radio" name="slide-control" id="goto-slide-4">
<div class="reflect">
<div class="horizon">
<ul class="slideshow">
<li class="slides slide-1"></li>
<li class="slides slide-2"></li>
<li class="slides slide-3"></li>
<li class="slides slide-4"></li>
</ul>
</div>
</div>
<div class="controls">
<label for="goto-slide-1">1</label>
<label for="goto-slide-2">2</label>
<label for="goto-slide-3">3</label>
<label for="goto-slide-4">4</label>
</div>
</div>
/*---- Feel free to alter these variables ----*/
@slideshow-diameter:700px;
@linked-transition-speed:0.5s;
/*---- Don't alter this ----*/
@slideshow-radius:@slideshow-diameter / 2;
/*---- Adopt "old IE" box-sizing model ----*/
* { box-sizing: border-box; }
/*---- Reset lists ---*/
.list-reset {
margin:0;
padding:0;
list-style-type:none;
}
html, body { background:#212121; font-size:12px; }
/*---- Begin styles ----*/
.container {
width:@slideshow-diameter + 2px;
margin:2em auto;
text-align:center;
}
.horizon {
overflow:hidden;
width:@slideshow-diameter;
height:@slideshow-radius;
}
.reflect {
box-reflect:below 4px -webkit-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.1) 100%);
}
.controls {
margin:10px 0 0 0;
label {
display:inline-block;
border:1px solid #666666;
padding:4px 10px;
box-shadow:0 -1px 3px rgba(0,0,0,0.95);
background:#161616;
z-index:10;
color:#666666;
font-weight:normal;
cursor:pointer;
&:hover {
border-color:#ddd;
color:white;
}
}
}
.slideshow {
.list-reset;
width:@slideshow-diameter;
height:@slideshow-diameter;
position:relative;
.slides {
.list-reset;
display:block;
position:absolute;
height:@slideshow-radius;
width:@slideshow-diameter;
opacity:0;
z-index:1;
background-size:100% auto;
transform:rotate(180deg);
transform-origin:50% 100%;
transition: z-index 0 ease 0,
opacity 0 ease @linked-transition-speed,
transform @linked-transition-speed ease @linked-transition-speed;
/*---- Decoration ----*/
border:1px solid #121212;
box-shadow: inset 0 0 4px rgba(0,0,0,0.8),
inset 0 -2px 1px rgba(255,255,2555,0.4)
0 6px 8px rgba(0,0,0,0.8);
&.slide-1 {
top:0;
left:0;
border-radius:@slideshow-radius @slideshow-radius 0 0;
background:url(https://1.bp.blogspot.com/-hS8MULN0FTk/UEefAagxkqI/AAAAAAAAAfU/OC6JQ1mLYCk/s1600/ak.jpg) no-repeat left 20%;
}
&.slide-2 {
top:0;
left:0;
border-radius:@slideshow-radius @slideshow-radius 0 0;
background:url(http://focusdynaresearch.files.wordpress.com/2012/09/winter-is-coming-game-of-thrones-1.jpeg) no-repeat left 2%;
}
&.slide-3 {
top:0;
left:0;
border-radius:@slideshow-radius @slideshow-radius 0 0;
background:url(http://www.google.co.in/url?source=imgres&ct=img&q=http://3.bp.blogspot.com/-Lgxi6i9PqNU/T5izGCbCIEI/AAAAAAAAAUw/nStMbOGX4uU/s1600/game-of-thrones-tyrion-lannister-iquote-16x16-poster-par45701.jpg&sa=X&ei=SoBGUJPFLI-yrAfo-YA4&ved=0CAQQ8wc4AQ&usg=AFQjCNHTgYRzzVyP85fb6YhdYuYiRFvsJw) no-repeat left 55%;
}
&.slide-4 {
top:0;
left:0;
border-radius:@slideshow-radius @slideshow-radius 0 0;
background:url(http://www.google.co.in/url?source=imgres&ct=img&q=http://www.birchbox.com/images/sized/images/uploads/game_of_thrones_blue-480x318.jpg&sa=X&ei=ootGUPWpIITirAf4oIDwBQ&ved=0CAQQ8wc&usg=AFQjCNFXuJOup8Y2ClykpsycXa9wpwRPyw) 12%;
}
}
}
input[type="radio"] {
margin:-20px 0 0 -50px;
display:none;
&#goto-slide-1 {
&:checked ~ .reflect .horizon {
.slide-1 {
opacity:1;
z-index:5;
transform:rotate(0deg);
transition: z-index 0 ease 0s,
transform @linked-transition-speed ease 0s,
opacity @linked-transition-speed ease 0s;
}
}
}
&#goto-slide-2 {
&:checked ~ .reflect .horizon {
.slide-2 {
opacity:1;
z-index:5;
transform:rotate(0deg);
transition: z-index 0 ease 0s,
transform @linked-transition-speed ease 0s,
opacity @linked-transition-speed ease 0s;
}
}
}
&#goto-slide-3 {
&:checked ~ .reflect .horizon {
.slide-3 {
opacity:1;
z-index:5;
transform:rotate(0deg);
transition: z-index 0 ease 0s,
transform @linked-transition-speed ease 0s,
opacity @linked-transition-speed ease 0s;
}
}
}
&#goto-slide-4 {
&:checked ~ .reflect .horizon {
.slide-4 {
opacity:1;
z-index:5;
transform:rotate(0deg);
transition: z-index 0 ease 0s,
transform @linked-transition-speed ease 0s,
opacity @linked-transition-speed ease 0s;
}
}
}
}
View Compiled
/*---- Images from The Devil Tarot: http://devilskitchen.net/pages/the-devil-tarot.php ----*/
/*---- I must finish that set someday ----*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.