title: How can adjust images overlay size relative to img size
body: <p>I want to set a overlay on my images and when I hover the image an overlay appears on the image and is the same size as image. When I resize the window the overlay should resize automatically.</p>
  
  <p>I have tried some JS code but does not work. It's always set width/height to 0px.</p>
  
  <p>Please let me know how I can fix this.</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>var portImg = document.getElementById("portimg");
  var overlay = document.getElementsByClassName("overlay");
  var overlayh = overlay.style.height = portImg.clientHeight;
  var overlayw = overlay.style.width = portImg.clientWidth;
  /*
  tried this 1 too
  
  clientHeight + "px";
  clientWidth + "px";
  */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.col-sm-6 {
    position: relative;
  }
  
  .img-container {
    width=100%
  }
  
  .img-container img {
    width=100%
  }
  
  .overlay {
    position: absolute;
    margin-top: 20px;
    text-align: center;
  }
  
  .overlay:hover {
    transform: rotate(0deg);
    opacity: .95;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-sm-6"&gt;
    &lt;div class="overlay"&gt;
    &lt;/div&gt;
    &lt;!-- overlay continer --&gt;
  
    &lt;div class="img-container"&gt;
      &lt;img id="portimg" src="images/port.jpg" alt=""&gt;
    &lt;/div&gt;
    &lt;!-- img container --&gt;
  &lt;/div&gt;
  &lt;!-- col --&gt;</code></pre>
  </div>
  </div>
  </p>