Radio button under image sliders with pure CSS - html

Question

Currently the image slider is fix width a radio button is position by line-height. If the image width is switch to 100%, how do The radio button remain at the bottom of the image in responsive layout?
CSS
.slideshow{
width:640px;
height:360px;
max-height:760px;
position:relative;
text-align:center;.slideshow {
width: 640px;
height: 360px;
max-height: 760px;
position: relative;
text-align: center;
line-height: 75px;
padding-bottom: 30px;
}
.slideshow input[type="radio"] {
font-size: 0.75em;
width: 1em;
height: 1em;
display: inline-block;
position: relative;
top: 0;
bottom: 0;
z-index: 99;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #ccc;
border-radius: 1em;
transition: 0.3s ease-out background, 0.3s ease-out transform;
}
.slideshow input[type="radio"]:checked {
background: #999;
outline: 0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}
.slideshow .slideshow-item {
width: 640px;
height: 360px;
line-height: 1.5;
position: absolute;
top: 0;
opacity: 0;
transition: 0.3s ease-out opacity;
}
.slideshow .slideshow-item label {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
display: none;
z-index: 88;
cursor: pointer;
color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slideshow .slideshow-item label:after {
display: block;
content: "\25B6";
font-size: 2em;
color: #fff;
position: absolute;
top: 50%;
right: 10px;
margin-top: -0.5em;
}
.slideshow .slideshow-item label.previous {
left: 0;
display: block;
}
.slideshow .slideshow-item label.previous:after {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
transform: scaleX(-1);
right: auto;
left: 10px;.slideshow {
width: 640px;
height: 360px;
max-height: 760px;
position: relative;
text-align: center;
line-height: 75px;
padding-bottom: 30px;
}
.slideshow input[type="radio"] {
font-size: 0.75em;
width: 1em;
height: 1em;
display: inline-block;
position: relative;
top: 0;
bottom: 0;
z-index: 99;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #ccc;
border-radius: 1em;
transition: 0.3s ease-out background, 0.3s ease-out transform;
}
.slideshow input[type="radio"]:checked {
background: #999;
outline: 0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}
.slideshow .slideshow-item {
width: 640px;
height: 360px;
line-height: 1.5;
position: absolute;
top: 0;
opacity: 0;
transition: 0.3s ease-out opacity;
}
.slideshow .slideshow-item label {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
display: none;
z-index: 88;
cursor: pointer;
color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slideshow .slideshow-item label:after {
display: block;
content: "\25B6";
font-size: 2em;
color: #fff;
position: absolute;
top: 50%;
right: 10px;
margin-top: -0.5em;
}
.slideshow .slideshow-item label.previous {
left: 0;
display: block;
}
.slideshow .slideshow-item label.previous:after {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
transform: scaleX(-1);
right: auto;
left: 10px;
}
.slideshow .slideshow-item label.next {
left: 50%;
display: block;
}
.slideshow input[type="radio"]:checked + .slideshow-item {
opacity: 1;
}
}
.slideshow .slideshow-item label.next {
left: 50%;
display: block;
}
.slideshow input[type="radio"]:checked + .slideshow-item {
opacity: 1;
}
line-height:75px;padding-bottom:30px}.slideshow input[type=radio]{
font-size:.75em;
width:1em;height:1em;
display:inline-block;
position:relative;
top:0;
bottom:0;
z-index:99;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ccc;border-radius:1em;transition:.3s ease-out background,.3s ease-out transform}
.slideshow input[type=radio]:checked{
background:#999;outline:0;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);transform:scale(1.3)}.slideshow .slideshow-item{width:640px;height:360px;line-height:1.5;position:absolute;top:0;opacity:0;transition:.3s ease-out opacity}.slideshow .slideshow-item label{position:absolute;top:0;bottom:0;width:50%;display:none;z-index:88;cursor:pointer;color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.slideshow .slideshow-item label:after{display:block;content:'\25B6';font-size:2em;color:#fff;position:absolute;top:50%;right:10px;margin-top:-.5em}.slideshow .slideshow-item label.previous{left:0;display:block}.slideshow .slideshow-item label.previous:after{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);transform:scaleX(-1);right:auto;left:10px}.slideshow .slideshow-item label.next{left:50%;display:block}.slideshow input[type=radio]:checked+.slideshow-item{opacity:1}
HTML
<div class="page">
<h1>Pure CSS slideshow</h1>
<p>A proof of concept to have an image slideshow without javascript</p>
<div class="slideshow">
<input type="radio" name="slide" id="item-1" checked="checked" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/1" />
<label for="item-3" class="previous">Go to slide 3</label>
<label for="item-2" class="next">Go to slide 2</label>
</div>
<input type="radio" name="slide" id="item-2" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/2" />
<label for="item-1" class="previous">Go to slide 1</label>
<label for="item-3" class="next">Go to slide 3</label>
</div>
<input type="radio" name="slide" id="item-3" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/3" />
<label for="item-2" class="previous">Go to slide 2</label>
<label for="item-1" class="next">Go to slide 1</label>
</div>
</div>
<p>By #joggink | View on github</p>
</div>
Link Here

Answer 1

if your slideshow height is fixed using can use CSS translateY. codepen
.slideshow{
width:100%;
height:360px;
position:relative;
text-align:center;
padding-bottom:30px;
background-color:green;
}
.slideshow input[type=radio]{
font-size:.75em;
width:1em;
height:1em;
display:inline-block;
position:relative;
z-index:99;
transform: translateY(360px);
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background:#ccc;
border-radius:1em;
transition:.3s ease-out background,.3s ease-out transform
}
.slideshow input[type=radio]:checked{
background:#999;outline:0;transform: translateY(360px) scale(1.3)}
.slideshow-item{
width:100%;
height:360px;
line-height:1.5;
position:absolute;
top:0;
opacity:0;
transition:.3s ease-out opacity}
.slideshow .slideshow-item label{
position:absolute;
top:0;
bottom:0;
width:50%;
display:none;
z-index:88;
cursor:pointer;
color:transparent;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none-moz-user-select:none;-ms-user-select:none;user-select:none}.slideshow .slideshow-item label:after{display:block;content:'\25B6';font-size:2em;color:#fff;position:absolute;top:50%;right:10px;margin-top:-.5em}.slideshow .slideshow-item label.previous{left:0;display:block}.slideshow .slideshow-item label.previous:after{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);transform:scaleX(-1);right:auto;left:10px}.slideshow .slideshow-item label.next{left:50%;display:block}.slideshow input[type=radio]:checked+.slideshow-item{opacity:1}
<div class="page">
<div class="slideshow">
<input type="radio" name="slide" id="item-1" checked="checked" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/1" />
<label for="item-3" class="previous">Go to slide 3</label>
<label for="item-2" class="next">Go to slide 2</label>
</div>
<input type="radio" name="slide" id="item-2" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/2" />
<label for="item-1" class="previous">Go to slide 1</label>
<label for="item-3" class="next">Go to slide 3</label>
</div>
<input type="radio" name="slide" id="item-3" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/3" />
<label for="item-2" class="previous">Go to slide 2</label>
<label for="item-1" class="next">Go to slide 1</label>
</div>
</div>
<p>By #joggink | View on github</p>
</div>