title: How to create a pulse effect on an image for a couple seconds when the page loads?
body: <p>I am trying to create a pulse effect on an image but it is not working so far. I have tried to a <code>span</code> element and it works like that:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span class="pulse"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.pulse {
    margin:100px;
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #cca92c;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(204,169,44, 0.4);
    animation: pulse 2s infinite;
  }
  .pulse:hover {
    animation: none;
  }
  
  @-webkit-keyframes pulse {
    0% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
  }
  @keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
        box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
        box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
  }
  </code></pre>
  
  <p>I want to the same with this image:</p>
  
  <pre><code>&lt;a href="javascript:void(0)" class="item"&gt;
    &lt;img src="https://image.ibb.co/cNjXna/guided_inv_icon.png" alt=""&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>When the page loads, the image should have a pulse effect or only get the image a bit bigger for 2 seconds in order to indicate interactivity and then the image should keep his original shape.</p>
  
  <p>Any suggestions?</p>
  
  <p>I have created this pen: <a href="https://codepen.io/maketroli/pen/ZyOJYM" rel="nofollow noreferrer">https://codepen.io/maketroli/pen/ZyOJYM</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I need to create that same effect in the image below the yellow circle. The yellow circle made from the <code>span</code> is doing what I want to achieve with the image below.</p>