title: CSS images and texts hovering both
body: <p>I'm trying to apply an effect to my pics when I put the cursor over them. What I want is a greyscale filter and a that a text appears. I've used this code:</p>
  
  <p><code>HTML:</code></p>
  
  <pre><code>&lt;div class="upic_wrap"&gt;
      &lt;img class="upic" src="foo.jpg"&gt; 
      &lt;div class="upic_text"&gt;Avenida Central&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>CSS:</code></p>
  
  <pre><code>.upic_text {
      position:absolute;
      top: 50%;
      left: 50%;
      transform:translate(-50%, -50%);
      visibility:hidden;
      opacity:0;
  }
  .upic:hover {
      opacity:0.5;
      -webkit-filter:grayscale(100%); 
      filter:grayscale(100%);
  }
  .upic_wrap:hover .upic_text {
      visibility:visible;
      opacity:1;
      color:#000;
      text-align:center;
      text-shadow:1px 1px yellow;
  }
  </code></pre>
  
  <p>I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/DKgfx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DKgfx.png" alt="off pic"></a>(out of pic)</p>
  
  <p><a href="https://i.stack.imgur.com/Eh6kh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Eh6kh.png" alt="hover pic"></a>(hover pic, yes! what I want!)</p>
  
  <p>Which is perfect, but the problem is when the cursor is over the text. That's what happen: 
  <a href="https://i.stack.imgur.com/sAc04.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sAc04.png" alt="error"></a>(hover text, noooo!)</p>
  
  <p>I would like to always get the effect of "hover pic" (the second) when I hover the pic or the text.</p>
  
  <p>How could I solve that?</p>
  
  <p>Thanks! </p>