title: CSS Transition with Radio Button and JS
body: <p>With my jQuery code I am able to get the attributes from the .item but my css transitions aren't working. You can see the intended transition by replacing <code>.item</code> with <code>.item-tile</code>.</p>
  
  <p>How do get my CSS transitions to work with my <code>jQuery</code> code?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".item-wrap").on("click", ".item", function() {
    var itemColor = $(this)
      .find(".icon")
      .css("background-color");
    $(".category-color").css("background-color", itemColor);
    return false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.item-wrap {
    display: flex;
  }
  
  .icon {
    margin: 0px 5px 0px 5px;
    position: relative;
    height: 35px;
    width: 35px;
    border-radius: 50%;
  }
  
  .item-wrap .item {
    position: relative;
  }
  
  .item-wrap .item .radio-button {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    z-index: 999;
    cursor: pointer;
  }
  
  .item-wrap .item .item-tile {
    -webkit-transition: -webkit-transform 300ms ease;
    transition: -webkit-transform 300ms ease;
    -o-transition: transform 300ms ease;
    transition: transform 300ms ease;
    transition: transform 300ms ease, -webkit-transform 300ms ease;
  }
  
  .item-wrap .item .radio-button:checked+.item-tile {
    border: 2px solid #079ad9;
    -webkit-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  
  .category-color {
    height: 50px;
    width: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="item-wrap"&gt;
      &lt;div class="item"&gt;
        &lt;input id="clothing" class="radio-button" type="radio" name="radio" /&gt;
        &lt;div class="item-tile"&gt;
          &lt;div class="icon" style="background-color:blue;"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;input id="elephant" class="radio-button" type="radio" name="radio" /&gt;
        &lt;div class="item-tile"&gt;
          &lt;div class="icon" style="background-color:red;"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;input id="fish" class="radio-button" type="radio" name="radio" /&gt;
          &lt;div class="item-tile"&gt;
            &lt;div class="icon" style="background-color:green;"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="copy-container"&gt;
      &lt;div class="category-color"&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>