Rings with ripple animation CSS ONLY

Question

Problem

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

Codepen Link

This is what I have so far

This is what I have in mind 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.

Code

HTML

  <div id="tree-wrapper">
 <img class="tree" <div><img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" />
    <div class="ripple"></div>
  <div class="circle-top-left" unselectable="yes" onselectstart="return false;">

      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Training</u><br />Personal, Corporate
          </p>  
          <span></span>
        </div>
      </div>
  </div>
 </a>
 <div class="circle-top-right" unselectable="yes" onselectstart="return false;">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Consulting</u><br />Project, Organization
          </p>  
          <span></span>
        </div>
      </div>
  </div>
 </a>
  <div class="circle-bot-right" unselectable="yes" onselectstart="return false;">
    <a class href="http://veddma.net/our-services/accreditation">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Accreditation</u><br />Professional Management Architects
          </p>  
          <span></span>
        </div>
      </div>
   </div>
  </a>
  <div class="circle-bot-left" unselectable="yes" onselectstart="return false;">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Tools</u><br />
          </p>  
          <span></span>
        </div>
      </div>
  </div>
  </a>
</div>

CSS

* {

    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;}

Answer 1

You can use an animation like you are trying to use but instead of using box-shadow on the :before and :after pseudo-elements use a simple border.

Below is quick example; just hover on the circle to stop it. (Do note that it does not have all prefixed properties a la -webkit-, etc)

.circle {
  height:100px;
  width:100px;
  border-radius:50%;
  background-color:red;
  
  position:relative;
  top:100px;
  left:300px;
  
  -webkit-transition:height .25s ease, width .25s ease;
  transition:height .25s ease, width .25s ease;
  
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

.circle:hover{
  height:150px;
  width:150px;
}

.circle:before,
.circle:after {
  content:'';
  display:block;
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  border-radius:50%;
  border:1px solid red;
}

.circle:before {
  -webkit-animation: ripple 2s linear infinite;
  animation: ripple 2s linear infinite;
}
.circle:after {
  -webkit-animation: ripple 2s linear 1s infinite;
  animation: ripple 2s linear 1s infinite;
}

.circle:hover:before,
.circle:hover:after {
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes ripple{
  0% {-webkit-transform:scale(1); }
  75% {-webkit-transform:scale(1.75); opacity:1;}
  100% {-webkit-transform:scale(2); opacity:0;}
}

@keyframes ripple{
  0% {transform:scale(1); }
  75% {transform:scale(1.75); opacity:1;}
  100% {transform:scale(2); opacity:0;}
}

<div class="circle"></div>

Answer 2

you could use : border-style:double, padding, background-clip.

* {
  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: 68px;
  height: 68px;
  border-radius: 50%;
  transition: all .5s ease-in-out;
  margin: 0;
  text-align: center;
  background-clip:content-box;
  padding:10px;
  border:double 0px #b20312
}

.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
  width: 170px;
  height: 170px;
  color: transparent;
  border:double 20px #b20312;
}

.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);*/


.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;
}

  <div id="tree-wrapper">
 <img class="tree" <div><img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" />
    <div class="ripple"></div>
  <div class="circle-top-left" unselectable="yes" onselectstart="return false;">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Training</u><br />Personal, Corporate
          </p>  
          <span></span>
        </div>
      </div>
  </div>
 </a>
 <div class="circle-top-right" unselectable="yes" onselectstart="return false;">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Consulting</u><br />Project, Organization
          </p>  
          <span></span>
        </div>
      </div>
  </div>
 </a>
  <div class="circle-bot-right" unselectable="yes" onselectstart="return false;">
    <a class href="http://veddma.net/our-services/accreditation">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Accreditation</u><br />Professional Management Architects
          </p>  
          <span></span>
        </div>
      </div>
   </div>
  </a>
  <div class="circle-bot-left" unselectable="yes" onselectstart="return false;">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Tools</u><br />
          </p>  
          <span></span>
        </div>
      </div>
  </div>
  </a>
</div>

http://codepen.io/anon/pen/YyVwWZ