title: Hiding and revealing text css
body: <p>I know this question has been asked a hundred times and I have read every last one of them. </p>
  
  <p>I have an image that is also a link. When the image is hovered it shows a new image and I have a small paragraph description I would like to pop up next to the image when the link is hovered over as well. Simple, right?</p>
  
  <p>What i'm doing makes sense to me, and is the answer to this question. What am I doing wrong? This seems very straightforward.</p>
  
  <p><a href="https://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering">How to show text on image when hovering?</a></p>
  
  <p>I will paste my relevant code. Comparing to the posted link answer, I have the class project1 instead of imgWrapper and novelDescrip instead of imgDescription</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="project1"&gt;
          &lt;a href="#"&gt;&lt;img id="novel" src="img/newnovel.png" onmouseover="this.src='img/newnovelblue.png'" onmouseout="this.src='img/newnovel.png'" /&gt;&lt;/a&gt;
  
          &lt;p class="novelDescrip" &gt;A website for a local musician to market, stream, and distribute music and merchandise.&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.project1 p {
      width: 25%;
      margin: 20px 15px 0 0;
      float: right;
  }
  
  .novelDescrip {
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
  
      -webkit-transition: visibility opacity 0.2s;
  }
  
  .project1:hover .novelDescrip {
      visibility: visible;
      opacity: 1;
  }
  </code></pre>
  
  <p>EDIT</p>
  
  <p>Here is my problem now, the text hides and reveals but the hover is activated anytime my mouse is hovering in the area enclosed by the rectangle I drew on this image. Any ideas on why this is happening?</p>
  
  <p><img src="https://i.stack.imgur.com/IIECY.png" alt="enter image description here"></p>