<div class="container">
<div class="radios">
<div>
<input id="bio1" name=button type="radio" class="open" checked>
<label for="bio" class="overlay">
<div class="circle"></div>
<span class=text>Bio</span>
</label>
<div id=biopanel class="panel">
<span class=inner-text>Saumitra Bose</span>
</div>
</input>
</div>
<div>
<input id="contact1" name=button type="radio" class=open>
<label for="contact">
<div class=circle> </div>
<span class=text>Contact</span>
</label>
<div id=contactpanel class="panel"><span class=inner-text>Don't call me</span></div>
</input>
</div>
<div>
<input id="work1" name=button type="radio" class=open>
<label for="work1">
<div class=circle> </div>
<span class=text>Work</span>
</label>
<div id=workpanel class="panel">
<span class=inner-text>Nothing to see here</span> </div>
</input>
</div>
</div>
</div>
<div class=bg></div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
@mixin transition($val1, $time, $animate) {
transition: $val1 $time $animate;
-webkit-transition: $val1 $time $animate;
-moz-transition: $val1 $time $animate;
-o-transition: $val1 $time $animate;
-ms--transition: $val1 $time $animate;
}
@mixin transform($transforms){
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
$light:#385053;
$text:#314547;
$font1: 'Open Sans';
@mixin center {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
body{
background: linear-gradient(90deg, #FFF 50%, $text 50.1%);
}
.bg {
@include center;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #FFF 50%, $text 50.1%);
z-index: 1;
display: block;
}
.buttons {
display: block;
position: absolute;
margin: 0 auto;
}
.container {
display: block;
position: absolute;
left: 8%;
top: 50%;
@include transform(translate(0%, -50%));
height: 80%;
width: 70%;
max-height: 250px;
z-index: 5;
background-color: none;
}
.radios {
position: absolute;
display: block;
height: 100%;
width: 100%;
margin-top: 0 auto;
background-color: none;
}
input[type="radio"] {
opacity: 0;
cursor: pointer;
display: block;
width: 30px;
height: 30px;
position: absolute;
outline: none;
left: 0;
z-index: 7;
&:checked+label .circle:before {
background: $light;
}
&:checked:hover+label .circle:before {
background: #00B285;
}
&:checked ~ .panel {
background: $light;
width: 100%;
left: 20%;
@media(max-width:640px){
left:0%;
}
margin-left:20px;
& .inner-text {
width: 80%;
}
}
&:hover + label .circle{
border-color:#00B285;
}
& ~ .panel {
float:left;
clear:both;
display: block;
position: absolute;
left: 500%;
height: 100%;
width: 0%;
overflow: hidden;
z-index: 9;
background: transparent;
@media(max-width:640px){
top:58%;
}
& .inner-text {
float: left;
color: white;
display: block;
background: $light;
width: 0%;
z-index: 10;
overflow: hidden;
margin-left: 2%;
margin-top: 2%;
font-family: $font1;
font-size: 1em;
}
}
&+label {
float:left;
clear:both;
position: absolute;
left: 0;
background-color: white;
& .text {
position: absolute;
display: block;
left: 50px;
top: 5px;
float: left;
color: $text;
font-family: $font1;
font-size: 25px;
}
}
}
.circle {
@include transition(border-color, 0.25s, linear);
content: '';
position: absolute;
left: 0;
height: 30px;
width: 30px;
display: block;
background-color: white;
border-radius: 50%;
border-color: $text;
border-style: solid;
border-width: 5px;
&:before {
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
-o-transition: background 0.25s linear;
-ms--transition: background 0.25s linear;
display: block;
position: relative;
left: 50%;
top: 50%;
@include transform(translate(-50%, -50%));
height: 20px;
width: 20px;
content: '';
background: transparent;
border-radius: 50%;
}
}
#bio1 {
top: 0px;
&+label {
top: 0px;
}
}
#contact1 {
top: 50px;
&+label {
top: 50px;
}
}
#work1 {
top: 100px;
&+label {
top: 100px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.