title: Adjust background size on hover
body: <p>When you hover over the image, you will see that it will be replaced by the semi-transparent background in my code.</p>
  
  <p>The transparent background is supposed to cover all the picture, however, it only covers the area taken by the text. </p>
  
  <p>How do I make sure that it covers the whole picture, regardless of the text within the box?</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-css lang-css prettyprint-override"><code>/*Programs*/
  
  ul.img-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  
  ul.img-list li {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
  }
  
  div.text-content {
    background: rgba(26,33,43,0.9);
    color: white;
    cursor: pointer;
    display: table;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 20px;
    font-family: Roboto;
    line-height: 24px;
    font-weight: 200;
    text-align: center;
    overflow-y: auto;
    padding-right: 25px;
    padding-left: 25px;
    padding-top: 25px;
    padding-bottom: 25px;
    box-sizing: border-box;
   -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    overflow-y: auto;
  }
  
  div.text-content div {
    display: block;
    text-align: center;
    vertical-align: middle;
  }
  
  ul.img-list li:hover div.text-content {
    opacity: 1;
  }
  
  /* Events page */
  
  /*Event link button*/
  
  .btn {
  background-color: transparent;
  border-radius: 42px;
  border: 2px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  font-family: Roboto;
  line-height: 28px;
  font-size: 24px;
  padding: 5px 15px 5px 15px;
  margin-right: 45px;
  margin-left: 45px;
  }
  
  .btn:link {
      color: #ffffff;
      text-decoration: none;
  }
  
  .btn:visited {
    color: #1b1c16;
    text-decoration: none;
  }
  
  .btn:hover {
    background-color: #ffffff;
    color: #1b1c16 !important;
  }
  
  .btn:active {
   position: relative;
   top: 1px;
  }
  
  /*All events button*/
  
  .evens_btn {
  background: ;
  }
  
  .events_btn&gt;span{
  color: #f9c70f;
  font-family: Roboto;
  color: #ffffff;
  font-size: 24px !important;
  background: ;
  text-decoration: none !important;
  padding: 10px 0px 10px 0px;
  }
  
  .events_btn&gt;i{
  color: #ffffff; 
  margin-right: 15px; 
  font-size: 50px;
  }
  
  .events_btn:link&gt;i {
      color: #f9c70f;
  }
  
  .events_btn:visited&gt;i {
    color: #ffffff;
    text-decoration: none;
  }
  
  .events_btn:hover&gt;i {
   color: #f9c70f;
  }
  
  .events_btn:active&gt;i {
    color: #f9c70f;
  }
  
  .events_btn:link&gt;span {
      color: #f9c70f;
  }
  
  .events_btn:visited&gt;span {
    color: #ffffff;
    text-decoration: none;
  }
  
  .events_btn:hover&gt;span {
   color: #f9c70f ;
  }
  
  .events_btn:active&gt;span {
    color: #f9c70f;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="img-list"&gt;
    &lt;li&gt;&lt;img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /&gt;                              
      &lt;div class="text-content"&gt;
        &lt;div&gt;
         &lt;h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;"&gt;WEBINAR&lt;br/&gt;ARCHIVE&lt;/h5&gt;
         &lt;hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/&gt;Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
        &lt;br&gt;
        &lt;a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank"&gt;READ MORE&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>