title: Animated light reflection on image in Css or Jquery
body: <p>Take a look at below image:</p>
  
  <p><a href="https://i.stack.imgur.com/0Wpxc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Wpxc.jpg" alt="enter image description here"></a></p>
  
  <p>I need to animate white light reflection on image to go in from right side and go out from the left side of the image.
  I did some effect with SVG on it like this:</p>
  
  <pre><code>&lt;div class="wrapper_1"&gt;
  &lt;img src="../images/stone.png"/&gt;
  &lt;svg width="1600" height="600" viewBox="0 0 1600 600"&gt;
      &lt;filter id="demo1"&gt;
          &lt;feGaussianBlur stdDeviation="3" result="blur4"/&gt;
          &lt;!--Lighting effect--&gt;
          &lt;feSpecularLighting result="spec4" in="blur4" specularExponent="35" lighting-color="#cccccc"&gt;
              &lt;!--Light source effect--&gt;
              &lt;fePointLight x="75" y="100" z="200"&gt;
                  &lt;!--Lighting Animation--&gt;
                  &lt;animate attributeName="x" values="75;320;75" dur="10s" repeatCount="indefinite"/&gt;
              &lt;/fePointLight&gt;
          &lt;/feSpecularLighting&gt;
          &lt;!--Composition of inputs--&gt;
          &lt;feComposite in="SourceGraphic" in2="spec4" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/&gt;
      &lt;/filter&gt;
      &lt;filter id="demo2"&gt;
          &lt;feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur5"/&gt;
          &lt;!--Composition of inputs--&gt;
          &lt;feComposite in="SourceGraphic" in2="blur5" operator="arithmetic" k1="0" k2="3" k3="3" k4="0"/&gt;
      &lt;/filter&gt;
      &lt;!--Apple tree graphic--&gt;
      &lt;g class="tree" filter="url(#demo4)"&gt;
          &lt;g&gt;
              &lt;line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1383" y1="1088" x2="1173" y2="967" id="svg_35"/&gt;
              &lt;path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_36"/&gt;
              &lt;line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1442" y1="1054" x2="1001" y2="852" id="svg_39"/&gt;
              &lt;path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_41"/&gt;
          &lt;/g&gt;
          &lt;g display="inline"&gt;
              &lt;line fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="square" x1="1383" y1="1088" x2="1173" y2="967" id="svg_28"/&gt;
              &lt;path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_29"/&gt;
              &lt;path fill="none" stroke="" stroke-linejoin="null" stroke-linecap="round" d="m274.31702,193.091c9.00897,-18.4798 14.82697,11.772 13.758,9.87198l12.98898,-18.55298" transform="rotate(50, 287.689, 193.73)" id=""/&gt;
              &lt;line fill="none" stroke-linejoin="null" stroke-linecap="square" x1="1442" y1="1054" x2="1001" y2="852" id="svg_32"/&gt;
              &lt;path fill="none" stroke="#ccc" stroke-linejoin="null" stroke-round="square" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_34"/&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p></p>
  
  <p>but that did not worke. Actually tried with SVG but I looking for CSS or Jquery<br>
  way.so any one can help?!</p>