circle links

by James Connolly

HTML

<div class="infographic-links">
  
  <h3 class="center-content">
    Testing Testing 123
  </h3>

  <ul class="links">
    <li><a href="#1">
        <span class="link-icon">1</span>
        <span class="link-content">Link 1</span>
    </a></li>
    <li><a href="#2">
        <span class="link-icon">2</span>
        <span class="link-content">Link 2</span>
    </a></li>
    <li><a href="#3">
        <span class="link-icon">3</span>
        <span class="link-content">Link 3</span>
    </a></li>
    <li><a href="#4">
        <span class="link-icon">4</span>
        <span class="link-content">Link 4</span>
    </a></li>
    <li><a href="#5">
        <span class="link-icon">5</span>
        <span class="link-content">Link 5</span>
    </a></li>
  </ul>
</div>

SCSS

.infographic-links {
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    li {
      font-size: 20px;
      margin: 0 0 20px;
    }
  }
}

@media screen and (min-width: 600px) {
  .infographic-links {
  margin: 25px auto;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-image: conic-gradient(red 0deg, orange 36deg, orange 72deg, red 72deg, orange 108deg, orange 144deg, red 144deg, orange 180deg, orange 217deg, red 217deg, orange 289deg, red 289deg, orange 325deg, orange 360deg);
  position: relative;
  
  .link-icon,
  .link-content,
  .center-content {
    transition: all 0.4s ease;
  }

  .center-content {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 30px;
    text-align: center;
    font-size: 1.5em;
    font-weight: 400;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25%;
    margin-top: -25%;
    
    .flipped {
      background: red;
      //transform: rotateY(-180deg);
    }
  }

  li {
    
    margin: 0;
    
    &:nth-child(1) .link-icon {
      left: 36px;
      top: -5px;
    }

    &:nth-child(2) .link-icon {
      right: 36px;
      top: -5px;
    }

    &:nth-child(3) .link-icon {
      left: -30px;
      bottom: 87px;
    }

    &:nth-child(4) .link-icon {
      right: -30px;
      bottom: 87px;
    }

    &:nth-child(5) .link-icon {
      left: 50%;
      bottom: -35px;
      transform: translateX(-50%);
    }
  }

  .link-content {
    @extend .center-content;
    color: #000;
    visibility: hidden;
    opacity: 0;
    transform: rotateY(180deg);
    backface-visibility: hidden;
  }

  .link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5px;
    text-align: center;
    width:...

JavaScript

(function($) {

  $('.link-icon').on({
    mouseenter: function() {
      $('.center-content').css({
        'transform': 'rotateY(-180deg)',
      });
    },
    mouseleave: function() {
      $('.center-content').css({
        'transform': 'rotateY(0deg)',
      });
    }
  });

})(jQuery);