title: css hide "Choose File" button but display file after select
body: <p>I would like to make custom button for an image upload. I am able to get this result with the demo below:</p>
  
  <p><a href="https://jsfiddle.net/algometrix/fgrbyo4z/" rel="noreferrer">https://jsfiddle.net/algometrix/fgrbyo4z/</a></p>
  
  <p>But HOW CAN I DISPLAY the file name selected after? Or maybe even a thumbnail of an image if possible? Like after I choose a file from the window that pops open I would like it to display 'the file name' on the page after I selected it. </p>
  
  <p>Javascript - jQuery is totally an option here if anyone can help in that area. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
    &lt;div style="display:block;text-align:center;margin-top:20%;"&gt;
      &lt;label for="files"&gt; &lt;span class="btn"&gt;Select Image&lt;/span&gt;&lt;/label&gt;
      &lt;input style="visibility: hidden; position: absolute;" id="files" class="form-control" type="file" name="files"&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.btn {
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    background: #3f88b8;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
  }
  
  .btn:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
  }
  </code></pre>