title: How to swap the displayed image based on which radio button is selected?
body: <p>I have a bunch of column groups (col-md-4), each containing two absolutely positioned images on top of each other within a div. I need to switch the visible image within a group by changing its opacity from 0 to 1 based on which radio button is checked. Is there a way to do this with jquery?</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div class="slide-swapper"&gt;
        &lt;img src="images/gray.jpg" class="img-fluid gray" height="360" width="360" alt="gray"&gt;
        &lt;img src="images/silver.jpg" class="img-fluid silver" height="360" width="360" alt="silver"&gt;
      &lt;/div&gt; 
      &lt;div class="color-group"&gt;
        &lt;input id="input-1" type="radio" checked="checked" name="change-image"&gt;
        &lt;label for="input-1" title="gray"&gt;Gray&lt;/label&gt;
        &lt;input id="input-2" type="radio" name="change-image"&gt;
        &lt;label for="input-2" title="silver"&gt;Silver&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  &lt;style&gt;
      .slide-swapper {
          position: relative;
          height: 360px;
          margin-bottom: 30px;
      }
      img {
          position: absolute;
          top: 0;
          left: 0;
      }
  &lt;/style&gt;
  </code></pre>