title: CSS-only hover over div un-hides text on CodePen, but not on my WP site.
body: <p>I'm trying to set up a div that shows text over an image when you hover over it. It works fine on CodePen, but not on my WordPress site. I tried playing with some of the CSS, but none of the things I tried ended up working. Site under construction. Any suggestions?</p>
  
  <p>Here is the code for CodePen: <a href="http://codepen.io/Clare12345/pen/RWoxRB" rel="nofollow">http://codepen.io/Clare12345/pen/RWoxRB</a>. Also works on Fiddle: <a href="http://jsfiddle.net/Clare12345/yxap7n30/" rel="nofollow">http://jsfiddle.net/Clare12345/yxap7n30/</a>
  :/</p>
  
  <p>The HTML:</p>
  
  <pre><code>    &lt;div class="container"&gt;
  
          &lt;div class="sep"&gt;
  
              &lt;div class="image-hover img-layer-image-hover-backgroundchange"&gt;
                  &lt;img src="http://www.plici.ro/images/3-1386110366.jpg"&gt;
                  &lt;div class="layer"&gt;this text should appear on hover&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>/****** image hover ******/
  
  .image-hover * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  .image-hover { position:relative;width:450px;height:200px;display:inline-block;overflow:hidden;background:#fff;border:10px solid #fff;box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)}
  .image-hover a { text-decoration: none; }
  
  /*** effect layer-image hover - background change ***/
  .img-layer-image-hover-backgroundchange .layer { position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0.6;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center}
  .img-layer-image-hover-backgroundchange:hover .layer {opacity:0.5;background-color:#fff;
  }
  .img-layer-image-hover-backgroundchange .layer {
  transition:all .4s ease-in-out;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
  -ms-transition:all .4s ease-in-out;
  -o-transition:all .4s ease-in-out;
  }
  
  .img-layer-image-hover-backgroundchange:hover .layer {
  transition:all .2s ease-in-out;
  -webkit-transition:all .2s ease-in-out;
  -moz-transition:all .2s ease-in-out;
  -ms-transition:all .2s ease-in-out;
  -o-transition:all .2s ease-in-out;
  }
  </code></pre>