title: How do I drag, drop and scale an image in a div and maintain the same large size?
body: <p>I've been working on a new project that requires me to drag elements from a div on the left and drop them to a div on the right. When they get to the right side they need to increase in size and stay that way until clicked. The dragging and dropping is working fine, but I can't seem to get the images to keep the new larger size. </p>
  
  <p>I tried changing my class with javascript when it's dropped into said div and am currently trying to apply a transition with a duration of 9999s to pull off what I'm looking to do.</p>
  
  <p>Is there a better way of doing this? I have to imagine there is. </p>
  
  <p>Here's the code I'm working with now.</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div class="grow" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
  &lt;img id="drag1" src="img/mountains.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code> function allowDrop(ev){
      ev.preventDefault();
  
  }
  function drag(ev){
      ev.dataTransfer.setData("content", ev.target.id);
  }
  function drop(ev){
      ev.preventDefault();
      var image= ev.dataTransfer.getData("content");
      ev.target.appendChild(document.getElementById(image));
  
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#div1 {
  width:500px;
  height:200px;
  padding:10px;
  border:1px solid #aaaaaa;}
  /* 2D TRANSITIONS */
  /* Grow */
  .grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s; 
  -webkit-transition-duration: 9999s;
  -webkit-transition-property: transform;
  transition-property: transform;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .grow:hover, .grow:focus, .grow:active {
  -webkit-transform: scale(1.1); 
  transform: scale(1.9);
  }
  </code></pre>