title: Hover event CSS not working at all
body: <p>I'm trying to make a div appear over an image using CSS "hover" event. But it's not working at all. Nothing happens at all... could you check what's going on?
  Thank you.</p>
  
  <pre><code>.over {
  
          display: none;
          opacity: 0.6;
          background: #F58634;
          font-family: Montserrat;
          color: white;
          padding: 20px;
          width: 171px;
          height: 114px;
          z-index: 2;
  
      }
  
      .over:hover {
  
          display: block;
  
      }
  
      .img {
  
          z-index: 1;
  
      }
  </code></pre>
  
  <p>And here is the HTML...</p>
  
  <pre><code>&lt;td width="171px" &gt;
                  &lt;img class="img" src="./img/cat/_MG_7415.JPG" alt="" width="171px" height="114px"&gt;
  
                  &lt;div class="over"&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td&gt;PESO&lt;/td&gt;
                              &lt;td&gt;0,500gr&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;VALIDADE&lt;/td&gt;
                              &lt;td&gt;60 DIAS&lt;br&gt;&lt;span style="font-size:5px;"&gt;APÓS DATA DE FABRICAÇÃO&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;CAIXA&lt;/td&gt;
                              &lt;td&gt;5kg&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;TEMPERATURA&lt;/td&gt;
                              &lt;td&gt;0 a 5ºC&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
  
              &lt;/td&gt;
  </code></pre>
  
  <p>So, I want the div class ".over" to overlay ".img" to show some information mouse is on the image. Is there anything I'm missing?</p>
  
  <p>Thanks!</p>