title: Rings with ripple animation CSS ONLY
body: <p><strong>Problem</strong> </p>
  
  <p>Trying to get a specific animation where there are two rings that ripple/radiate from a shape on an image. I cant quite find that exact animation</p>
  
  <p><strong>Codepen Link</strong></p>
  
  <p><a href="http://codepen.io/rtr365/pen/KddNrV" rel="noreferrer">This is what I have so far</a></p>
  
  <p><a href="http://imgur.com/My4iKOC" rel="noreferrer">This is what I have in mind</a> Its a crude drawing but it gives you an idea. I want rings rippling same as in my codepen around the leaf circle, instead of the whole circle. it would stop the animation on hover and circle would expand with text inside.</p>
  
  <p><strong>Code</strong> </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div id="tree-wrapper"&gt;
   &lt;img class="tree" &lt;div&gt;&lt;img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" /&gt;
      &lt;div class="ripple"&gt;&lt;/div&gt;
    &lt;div class="circle-top-left" unselectable="yes" onselectstart="return false;"&gt;
  
        &lt;div class="circle__wrapper"&gt;
          &lt;div class="circle__content"&gt;    
            &lt;p class="para"&gt;&lt;u&gt;Training&lt;/u&gt;&lt;br /&gt;Personal, Corporate
            &lt;/p&gt;  
            &lt;span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
   &lt;/a&gt;
   &lt;div class="circle-top-right" unselectable="yes" onselectstart="return false;"&gt;
        &lt;div class="circle__wrapper"&gt;
          &lt;div class="circle__content"&gt;    
            &lt;p class="para"&gt;&lt;u&gt;Consulting&lt;/u&gt;&lt;br /&gt;Project, Organization
            &lt;/p&gt;  
            &lt;span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
   &lt;/a&gt;
    &lt;div class="circle-bot-right" unselectable="yes" onselectstart="return false;"&gt;
      &lt;a class href="http://veddma.net/our-services/accreditation"&gt;
        &lt;div class="circle__wrapper"&gt;
          &lt;div class="circle__content"&gt;    
            &lt;p class="para"&gt;&lt;u&gt;Accreditation&lt;/u&gt;&lt;br /&gt;Professional Management Architects
            &lt;/p&gt;  
            &lt;span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/a&gt;
    &lt;div class="circle-bot-left" unselectable="yes" onselectstart="return false;"&gt;
        &lt;div class="circle__wrapper"&gt;
          &lt;div class="circle__content"&gt;    
            &lt;p class="para"&gt;&lt;u&gt;Tools&lt;/u&gt;&lt;br /&gt;
            &lt;/p&gt;  
            &lt;span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
  
      box-sizing: border-box;
  
  }
  
  
  #tree-wrapper{
      position: relative;
      width: 668px;
      height: 551px;
      margin: 0 auto;
  }
  
  #tree-wrapper p{
  
      margin: 0;
      padding: 0;
  }
  
  .tree {
  
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50px;
      margin-top: 75px;
  }
  
  .circle-top-left,
  .circle-top-right,
  .circle-bot-left,
  .circle-bot-right {
  
      cursor: default;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      overflow: hidden;
      font-size: 9px;
      -webkit-backface-visibility: hidden;
      position: absolute;
      background: #b20312;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      transition: all .5s ease-in-out;
      margin: 0;
      text-align: center;
  
  }
  
  .circle-top-left:hover,
  .circle-top-right:hover,
  .circle-bot-left:hover,
  .circle-bot-right:hover {
      width: 200px;
      height: 200px;
      padding: 0.6em 2.5em;
      color: transparent;
  }
  
  
  
  .circle-top-left {
  
      top: 23.9%;
      left: 11.2%;
  
  }
  
  .circle-top-right {
  
    top: 13%;
      left: 54.5%;
  
  }
  
  
  
  .circle-bot-left {
  
      top: 73.8%;
        left: 0;
  }
  
  
  
  .circle-bot-right {
  
        top: 53.5%;
          left: 91.2%;
  
  }
  
  .circle-top-left:hover,
  .circle-top-right:hover,
  .circle-bot-left:hover,
  .circle-bot-right:hover {
  
      transform: translate(-60px, -60px);
  }
  
  .circle__wrapper {
  
      display: table;
      width: 100%;
      height: 100%;
  }
  
  .title_subtitle_holder {
  
      display: block;
      padding: 30px 0 0;
      position: relative;
  }
  
  .circle__content {
  
      display: table-cell;
      padding: 1em;
      vertical-align: middle;
  }
  
  .para {
  
      line-height: 25px;
      display: none;
      font-size: 15px;
      color: white;
      text-align: center;
      vertical-align: middle;
  }
  
  .circle-top-right:hover .para,
  .circle-bot-right:hover .para,
  .circle-top-left:hover .para,
  .circle-bot-left:hover .para  {
      display: block;
  }
  
  .circle-top-right:hover span,
  .circle-bot-right:hover span,
  .circle-top-left:hover span,
  .circle-bot-left:hover span {
      display: none;
  }
  
  /*@import url(http://fonts.googleapis.com/css?family=Norican);*/
  
  @-webkit-keyframes rip 
  {
  /*  0%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent;
    }*/
  /*  5%  {
      box-shadow:0 0 0 0 #45c2c5,
                 0 0 0 0 rgba(255,255,255,0.5),
                 0 0 0 0 #45c2c5,
                 0 0 0 0 rgba(0,0,0,0.1);
    }*/
    50% {
      box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
                 0 0 10px 110px transparent,
                 0 0 30px 120px rgba(178,3,18, 0.5),
                 0 0 5px 130px transparent;
    }
    75% {
      box-shadow:0 0 40px 200px rgba(178,3,18, 0.1);
    }
    100% {
      box-shadow:0 0 40px 250px transparent;
    }
  }
  
  @-moz-keyframes rip 
  {
  /*  0%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent;
    }*/
  /*  5%  {
      box-shadow:0 0 0 0 #b20312,
                 0 0 0 0 rgba(255,255,255,0.5),
                 0 0 0 0 #b20312,
                 0 0 0 0 rgba(0,0,0,0.1);
    }*/
   /* 50% {
      box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
                 0 0 10px 110px transparent,
                 0 0 30px 120px rgba(178,3,18, 0.5),
                 0 0 5px 130px transparent;
    }
    75% {
      box-shadow:0 0 40px 250px rgba(178,3,18, 0.5);
    }
    100% {
      box-shadow:0 0 40px 250px transparent;
    }*/
  }
  @-moz-keyframes rip-lg
  {
  /*  0%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent;
    }
    5%  {
      box-shadow:0 0 0 0 #b20312,
                 0 0 0 0 rgba(255,255,255,0.5),
                 0 0 0 0 #b20312,
                 0 0 0 0 rgba(0,0,0,0.1);
    }*/
    50% {
      box-shadow:0 0 240px 200px rgba(178,3,18, 0.5),
                 0 0 210px 210px transparent,
  
    }
  /*  75% {
      box-shadow:0 0 40px 250px rgba(178,3,18, 0.1);
    }
    100% {
      box-shadow:0 0 40px 250px transparent;
    }*/
  }
  
  
  .ripple {
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      transform: translateZ(0);
  }
  
  
  
  h1 {
    /*display:block;*/
    /*font-size:50px;
    font-family: 'Norican', cursive;*/
    /*color: white;*/
    /*background-image: radial-gradient(10px at 47px 50% , #b20312 0%, #b20312 50%, rgba(178,3,18, 0) 50px);*/
    /*background-color: #45C2C5;*/
    /*background-color:#fa0;*/
    /*border-radius: 50%;*/
    /*box-shadow:3px 5px 0 rgba(0,0,0,0.15);*/
    /*position: absolute;*/
  /*  margin:-20px 0 0 -20px;*/
  /*  text-shadow:0 2px 0 #8ed2d4,2px 3px 15px rgba(0,0,0,0.5);*/
  
   /* transition: all 5s ease-in-out;*/
  }
  html:hover h1 {
    /*transform: translateY(-200px);*/
  }
  .ripple,.ripple:before,.ripple:after {
    display:block;
    border-radius:2px;
    width:2px;
    height:2px;
    -webkit-animation:rip 4s infinite;
    -moz-animation:rip 2s infinite;
  }
  .ripple {
    position:absolute;
    z-index:-1;
    top: 28%;
      left: 15%;
  }
  
  .ripple:before,.ripple:after {
    content:'';
    position:absolute;
  }
  .ripple:before {-webkit-animation-delay: 4s;-moz-animation-delay: 2s;}
  .ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;}
  </code></pre>