title: Keep :hover effect when hovering over another :hover
body: <p>As you can see in this <a href="http://jsfiddle.net/kysusekf/" rel="nofollow">JSFiddle</a>, while you hovering over <code>text-content</code>; the <code>opacity img</code> and the <code>img</code> classes return to a normal state, and I would like to keep <code>:hover</code> from <code>img</code> and <code>img opacity</code> while hovering over <code>text-content</code>.</p>
  
  <p>Also I would like to know how to set the <code>background-color</code> of image's background.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="img-list"&gt;
      &lt;li&gt;
      &lt;div class="table-responsive"&gt;
          &lt;table align="left" cellpadding="1" cellspacing="1" class="modernTable"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td style="border-color: transparent; text-align: center; vertical-align: top; width: 175px; height: 80px; background-color: rgba(25, 25, 25, 0.1);"&gt;
                      &lt;section class="opacity"&gt;
                          &lt;img alt="" src="http://i.imgur.com/TrwyFfT.png" style="border-width: 0px; border-style: solid; margin: 0px; width: 175px; height: 79px;"&gt;&lt;span style="font-size:14px;"&gt;&lt;span class="text-content"&gt;This will show up&lt;/span&gt;&lt;/span&gt;&lt;/section&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.opacity img {
      opacity:0.7;
      transition-duration: 0.5s;
  }
  .opacity img:hover {
      opacity:1;
      transition-duration: 1s;
  }
  img {
      background: rgba (0, 0, 0, 0.5);
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9);
      transition-duration: 0.5s;
  }
  img:hover {
      background: rgba (0, 0, 0, 0.9);
      -webkit-transform: scale(1.0);
      -moz-transform: scale(1.0);
      -o-transform: scale(1.0);
      transform: scale(1.0);
      transition-duration: 0.5s;
  }
  ul.img-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-align: center;
  }
  ul.img-list li {
      display: inline-block;
      height: 79px;
      margin: 0 1em 1em 0;
      position: relative;
      width: 175px;
  }
  span.text-content {
      background: rgba(0, 0, 0, 0.5);
      color: white;
      cursor: pointer;
      display: table;
      height: 20px;
      left: 0;
      position: absolute;
      top: 100px;
      width: 175px;
      opacity: 0;
      border: 1px dashed transparent;
      -webkit-transition: opacity 1s;
      -moz-transition: opacity 1s;
      -o-transition: opacity 1s;
      transition: opacity 1s;
  }
  span.text-content span {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
  }
  ul.img-list li:hover span.text-content {
      opacity: 1;
      border: 1px dashed rgba(255, 255, 255, 0.1);
  }
  </code></pre>
  
  <p>How can I fix this?</p>