.rad
.line
.box This is a popup box

@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  background: #345;
}
.rad,
.line,
.box {
  @include transition(all 0.25s ease-in-out);
}

.rad {
  margin: 0 auto;
  display: block;
  position: relative;
  width: 31px;
  height: 31px;
  top: 18px;
  background-color: rgba(250, 250, 250, 0.1);
  border: 3px solid rgba(100, 200, 250, 0.5);
  border-radius: 100%;
  cursor: pointer;
}
.rad:hover {
  top: 17px;
  border: 4px solid #fafafa;
}
.line {
  margin: 0 auto;
  display: block;
  position: relative;
  width: 1px;
  height: 0px;
  top: 22px;
  opacity: 0.2;
  background-color: #fafafa;
  &.open {
    height: 80px;
    opacity: 1;
  }
}
.box {
  margin: 0 auto;
  display: block;
  position: relative;
  width: 401px;
  height: 0px;
  top: 30px;
  opacity: 0.2;
  background-color: #fafafa;
  font: 1em 'Open Sans';
  text-align: center;
  line-height: 30px;
  color: #345;
  overflow: hidden;
  &.open {
    height: 30px;
    opacity: 1;
  }
}

$('.rad').on('mouseenter mouseleave', function () {
  $('.box, .line').toggleClass('open');
});