title: Trouble setting box-shadow using javascript
body: <p>I'm using color thief to extract the dominant color from each image, and setting that color as a box shadow over the image. There are 4 images displayed, so I stored them in an array, loop through the array extracting the dominant color from each and setting it as the boxShadow each time through the loop. I can't figure out what is wrong with my code as nothing at all is happening, any help would be much appreciated!</p>
  
  <p>JS:</p>
  
  <pre><code>  var slides = document.getElementsByClassName('slideImg');
  
    for (var i = 0; i &lt; slides.length; i++) {
      var sourceImage = slides[i];
      var colorTheif = new ColorThief();
      var color = colorTheif.getColor(sourceImage);
      slides[i].style.boxShadow = "inset 0 0 0 350px color";
    };
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="opinion"&gt;
    &lt;div class="wrap"&gt;
      &lt;div class="atable"&gt;
        &lt;?php query_posts(array('post_type' =&gt; array('community', 'projects'),'posts_per_page' =&gt; 4,'post_parent' =&gt; 0, 'post_status' =&gt; array('publish'), 'orderby' =&gt; 'menu_order date')); ?&gt;
        &lt;?php while (have_posts()) : the_post(); ?&gt;
          &lt;div class="acell"&gt;
            &lt;div class="contentbox"&gt;
              &lt;?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post-&gt;ID, 'issues'), 'large_size' );
              $url = $thumb['0']; ?&gt;
  
              &lt;ul class="slides"&gt;
                &lt;li&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;" title="Permalink to &lt;?php the_title(); ?&gt;" &gt;&lt;?php the_post_thumbnail('issues', array('class' =&gt; 'slideImg')) ?&gt;&lt;span class="yo"&gt;&lt;?php the_title(); ?&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
            &lt;!-- &lt;a href="&lt;?php the_permalink(); ?&gt;" title="Permalink to &lt;?php the_title(); ?&gt;"&gt;&lt;?php the_post_thumbnail('issues'); ?&gt;&lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;&lt;/a&gt; --&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;?php endwhile; wp_reset_query(); ?&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.opinion .atable .acell .contentbox {
  position: relative;
  }
  
  .opinion .atable .acell .contentbox img {
    width: 100%;
    height: auto;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    display: block;
    margin-bottom: 15px;
    position: relative;
  }
  
  .opinion .atable .acell .contentbox ul {
    list-style-type: none;
  }
  
  .opinion .atable .acell .contentbox ul li a {
    color: white;
    display: block;
    height: 200px;
    max-width: 100%;
    width: 100%;
  }
  
  .opinion .atable .acell .contentbox ul li a span {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 10px 10px 20px 10px;
    color: #fff;
    z-index: 10;
    display: inline-block;
    font-size: 1.3em;
    text-shadow: 1px 1px 1px #000;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
  </code></pre>