<div class="flex">
  <div class="app">
     <h2 class="title">Click A Planet</h2>
        <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="planets" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
    <style type="text/css">
      .st0{opacity:0.4;}
      .st1{fill:#5538D7;}
      .st2{fill:#4F46E3;}
      .st3{fill:#77BBFF;}
      .st4{fill:#3998FF;}
      .st5{fill:#3285FE;}
      .st6{fill:#3C9AFF;}
      .st7{fill:#606182;}
      .st8{fill:#6D7974;}
      .st9{fill:#94AD70;}
      .st10{fill:#899F64;}
      .st11{fill:#80965D;}
      .st12{fill:#849960;}
      .st13{fill:#525D95;}
      .st14{fill:#556E9A;}
      .st15{fill:#639FA3;}
      .st16{fill:#5A9198;}
      .st17{fill:#55898F;}
      .st18{fill:#5C989E;}
    </style>
    <filter id="blurMe">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
     <a href="#0" class="planetone">
    <g id="planetone">
      <g class="st0">
        <circle class="st1" cx="258.2" cy="172" r="112.5"/>
      </g>
      <g class="st0">
        <circle class="st2" cx="258.2" cy="172" r="97.4"/>
      </g>
      <g>
        <g>
          <circle class="st3" cx="258.2" cy="172" r="80.2"/>
          <path class="st4" d="M337.4,184.5c0.6-4.1,1-8.2,1-12.5c0-22.2-9-42.3-23.5-56.8c-16.5,50.9-62.4,87.4-116.5,87.4
            c-5,0-9.9-0.3-14.7-0.9c9.9,24.7,31.7,43.4,58.4,48.9c1.4,0.1,2.9,0.1,4.3,0.1C288.1,250.8,323.6,223.2,337.4,184.5z"/>
          <path class="st5" d="M338.4,172c0-9.7-1.7-19-4.9-27.6c-18.3,47.2-62.5,80.5-114,80.5c-8.1,0-16-0.8-23.7-2.4
            c14.7,18.2,37.2,29.8,62.4,29.8C302.5,252.3,338.4,216.3,338.4,172z"/>
        </g>

          <ellipse transform="matrix(0.9509 -0.3094 0.3094 0.9509 -37.4046 83.8411)" class="st6" cx="245.6" cy="159.8" rx="19.3" ry="14.9"/>

          <ellipse transform="matrix(0.8393 -0.5437 0.5437 0.8393 -56.7055 138.6727)" class="st6" cx="206.2" cy="165.3" rx="5.1" ry="5.1"/>
      </g>
    </g>
      </a>
     <a href="#0" class="planetthree">
    <g id="planetthree">
      <g class="st0">
        <circle class="st7" cx="127.7" cy="419.7" r="99.2"/>
      </g>
      <g class="st0">
        <circle class="st8" cx="127.7" cy="419.7" r="85.9"/>
      </g>
      <g>
        <g>
          <circle class="st9" cx="127.7" cy="419.7" r="70.8"/>
          <path class="st10" d="M197.7,430.7c0.6-3.6,0.9-7.3,0.9-11c0-19.6-7.9-37.3-20.8-50.1c-14.6,44.9-55.1,77.1-102.8,77.1
            c-4.4,0-8.7-0.3-13-0.8c8.7,21.8,28,38.3,51.5,43.1c1.3,0.1,2.5,0.1,3.8,0.1C154.1,489.1,185.5,464.8,197.7,430.7z"/>
          <path class="st11" d="M198.5,419.7c0-8.6-1.5-16.8-4.3-24.3c-16.1,41.6-55.1,71-100.6,71c-7.1,0-14.1-0.7-20.9-2.1
            c13,16,32.8,26.3,55,26.3C166.8,490.5,198.5,458.8,198.5,419.7z"/>
        </g>

          <ellipse transform="matrix(0.9509 -0.3094 0.3094 0.9509 -108.6001 55.4099)" class="st12" cx="120.4" cy="370.1" rx="24.4" ry="14.9"/>

          <ellipse transform="matrix(0.8393 -0.5437 0.5437 0.8393 -211.4178 154.2369)" class="st12" cx="155.2" cy="434.7" rx="4.5" ry="4.5"/>
      </g>
    </g>
    </a>
    <a href="#0" class="planettwo">
    <g id="planettwo">
      <g class="st0">
        <circle class="st13" cx="416.7" cy="393.6" r="128.7"/>
      </g>
      <g class="st0">
        <circle class="st14" cx="416.7" cy="393.6" r="111.4"/>
      </g>
      <g>
        <g>
          <circle class="st15" cx="416.7" cy="393.6" r="91.8"/>
          <path class="st16" d="M507.4,407.8c0.7-4.6,1.1-9.4,1.1-14.3c0-25.4-10.3-48.4-26.9-65c-18.9,58.2-71.4,100.1-133.3,100.1
            c-5.7,0-11.3-0.4-16.8-1c11.3,28.3,36.3,49.7,66.8,55.9c1.6,0.1,3.3,0.1,4.9,0.1C450.9,483.7,491.6,452.1,507.4,407.8z"/>
          <path class="st17" d="M508.5,393.6c0-11.1-2-21.7-5.6-31.6c-20.9,54-71.5,92.1-130.5,92.1c-9.3,0-18.3-1-27.1-2.7
            c16.8,20.8,42.5,34.1,71.4,34.1C467.4,485.4,508.5,444.3,508.5,393.6z"/>
        </g>

          <ellipse transform="matrix(0.8393 -0.5437 0.5437 0.8393 -152.3527 256.2105)" class="st18" cx="357.2" cy="385.8" rx="5.8" ry="5.8"/>

          <ellipse transform="matrix(0.9509 -0.3094 0.3094 0.9509 -111.7406 150.9364)" class="st17" cx="419.9" cy="427.7" rx="9.9" ry="9.9"/>
      </g>
    </g>
      </a>
    </svg>
    <div class="apptext">
      <div class="mercury">
      <h2>Mercury</h2>
      <p>Mercury is the closest planet to the Sun. It orbits in a highly elliptical orbit ranging from 46 million km (29 million miles) from the Sun out to 70 million km (43.5 million miles).</p>
        </div>
      <div class="jupiter">
        <h2>Jupiter</h2>
        <p>Jupiter orbits the Sun once very 12 years (at about 780 million km) and is comprised of gas (75% hydrogen and 24% helium) and is presumed to have a rocky core surrounded by a sea of liquid metallic hydrogen which forms a ball 110,000km in diameter. Jupiter’s total diameter is 142,984 km.</p>
      </div>
      <div class="uranus">
        <h2>Uranus</h2>
        <p>Uranus is the seventh closest planet to the Sun and the third largest and fourth heaviest of the planets. It diameter (50,000km) is four times that of Earth with a mass over 14 times that of Earth.</p>
      </div>
    </div>
  </div>
</div>
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600';

$font:'Source Sans Pro', sans-serif;
$primary:#2F54C9;
$secondary:#122E91;
$cubic:all .5s cubic-bezier(0.77, 0, 0.175, 1);

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie);
}
@mixin gradientAngle($start-color, $end-color, $angle) { 
    background: $start-color;
    background: -webkit-linear-gradient($angle, $start-color, $end-color);
    background: linear-gradient($angle, $start-color, $end-color);
}
@mixin transition($args...) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}
@mixin transform($transforms) {
    -webkit-transform: $transforms;
    -moz-transform: $transforms;
    -ms-transform: $transforms;
    -o-transform: $transforms;
    transform: $transforms;
}
@mixin transformOrigin($x,$y) {
    -webkit-transform-origin: $x $y;
    -moz-transform-origin: $x $y;
    -ms-transform-origin: $x $y;
    -o-transform-origin: $x $y;
    transform-origin: $x $y;
}
@mixin translate ($x, $y) {
   @include transform(translate($x, $y));
}
@mixin filter($filter-type,$filter-amount) { 
    -webkit-filter: $filter-type+unquote('(#{$filter-amount})');
    -moz-filter: $filter-type+unquote('(#{$filter-amount})');
    -ms-filter: $filter-type+unquote('(#{$filter-amount})');
    -o-filter: $filter-type+unquote('(#{$filter-amount})');
    filter: $filter-type+unquote('(#{$filter-amount})');
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color:#FFF;
  text-decoration:none;
}


html, body{
    height:100%;
    width: 100%;
}

body {
  padding:0px;
  margin:0;
  font-family:$font;
  @include gradientAngle(#150633,lighten(#150633,5%),90deg);
  -webkit-font-smoothing: antialiased;
}

.flex {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.app {
  @include gradientAngle($secondary,$primary,0deg);
  width:370px;
  text-align:center;
  overflow:hidden;
  height:650px;
  position:relative;
  box-shadow: 0 19px 48px rgba(0,0,0,0.22), 0 15px 32px rgba(0,0,0,0.15);
  .title {
    font-weight:600;
    font-size:14px;
    text-transform:uppercase;
    color:rgba(255,255,255,0.7);
    position:relative;
    z-index:9999;
  }
  .apptext {
    position:absolute;
    bottom:30px;
    padding:0px 30px;
    text-align:left;
    .mercury,.jupiter,.uranus {
      display:none;
    }
    h2 {
      color:#FFF;
      margin-bottom:5px;
    }
    p {
      font-weight:300;
      color:rgba(255,255,255,0.8);
    }
  }
  svg {
    min-width:600px;
    position:absolute;
    top:0px;
    left:-80px;
    #planetone,#planettwo,#planetthree {
      @include transition($cubic);
    }
    &.planetone {
      #planetone {
        @include transform(scale(1.7));
        transform-origin:center center;
      }
      #planettwo,#planetthree {
        @include transform(scale(.6));
        transform-origin:center;
        @include opacity(.3);
      }
    }
    &.planettwo {
      #planettwo {
        @include transform(scale(2));
        transform-origin:center;
      }
      #planetone,#planetthree {
        @include transform(scale(.6));
        transform-origin:center;
        @include opacity(.3);
      }
    }
    &.planetthree {
      #planetthree {
        @include transform(scale(2));
        transform-origin:center;
      }
      #planetone,#planettwo {
        @include transform(scale(.6));
        transform-origin:center;
        @include opacity(.3);
      }
    }
  }
}
View Compiled
// BASED OFF DRIBBLE SHOT https://dribbble.com/shots/3637563-Planet-Gradients
$(".planetone").click(function(){$("#planets").toggleClass("planetone").removeClass("planettwo planetthree"),$(".mercury").fadeToggle(),$(".jupiter").fadeOut("fast"),$(".uranus").fadeOut("fast")}),$(".planettwo").click(function(){$("#planets").removeClass("planetone planetthree").toggleClass("planettwo"),$(".uranus").fadeOut("fast"),$(".mercury").fadeOut("fast"),$(".jupiter").fadeToggle()}),$(".planetthree").click(function(){$("#planets").removeClass("planetone planettwo").toggleClass("planetthree"),$(".uranus").fadeToggle(),$(".jupiter").fadeOut("fast"),$(".mercury").fadeOut("fast")});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js