title: CSS hover effects only work with absolute positioning?
body: <p>I'm trying to make some text appear over an image when the image is hovered over. </p>
  
  <p>This is typically a simple process, however apparently :hover doesn't work if the first div (for example)</p>
  
  <p><code>first.div:hover second.div {</code></p>
  
  <p>over (in my case an image) is using relative positioning instead of absolute. </p>
  
  <p>There are lots of images in this page and they are set up as tables through CSS with attributes such as display:table; so I don't think I have the option of switching to absolute positioning. I know CSS tables aren't generally condoned, but I absolutely have to do it this way.</p>
  
  <p>Right now I'm using opacity changes to try to make the text appear. I've tried using z-index too, but I think the problem is that the :hover effect doesn't work well with absolute positioning. What workarounds, if any, are available?</p>
  
  <p>I'm not opposed to using languages other than HTML/CSS, but I'm pretty inexperienced and I don't understand them, so I'd prefer a CSS work around for this, but beggars aren't choosers.</p>
  
  <p>As requested, here's some code:</p>
  
  <p>HTML</p>
  
  <p><code>&lt;div class="cell"&gt;&lt;img class="box" src="image1.jpg"&gt;&lt;div id="text"&gt;Text text text&lt;/div&gt;&lt;/div&gt;</code></p>
  
  <p>CSS</p>
  
  <p><code>.cell {
          position:relative;
          display:table-cell;
          background-color:black;
          width:700px;
          height:auto;
          }</code>
  <code>#text {
          display:table;
          position:absolute;
          z-index:999;
          color:#fff;
          text-align:center;
          width:100%;
          top:48%;
          left:0;
          }</code></p>
  
  <p><code>img {
          max-height:600px;
          max-width:600px;
          height:auto;
          width:100%;
          filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
          filter: gray; /* IE6-9 */
          -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ &amp; Opera 15+ */
          opacity:0.4;
          z-index:2;
          }</code></p>
  
  <p><code>img:hover {
          filter: none;
          -webkit-filter: grayscale(0);
          opacity:1.0;
          }</code></p>
  
  <p>I'm not sure on what's causing this so I included a lot more than necessary... I'm a little new to coding so take it easy on me, but I can't get <code>cell.div:hover #text  { opacity:1;}</code> to work. I read somewhere that this is because hover effects don't work with relatively positioned divs...</p>