<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js