title: How to fade an image with CSS without opacity?
body: <p>Thanks for all the help, solution below.</p>
  
  <p>I am new to web development, and I am trying to rebuild a website to practice my CSS. </p>
  
  <p>The website in questions is <a href="http://www.divecarib.com" rel="noreferrer">http://www.divecarib.com</a>. If you scroll down to the pictures on that home page, you notice that they "fade" on hover. How do I achieve that fade? Using opacity makes the background image come through, which is not how it's implemented on that website. </p>
  
  <p>Thank you for the help!</p>
  
  <p>Below is my fade attempt...did not include the code in original post because I thought it was irrelevant given that I was on the wrong path. </p>
  
  <pre><code>.fade {
     opacity: 1;
     transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -webkit-transition: opacity .25s ease-in-out;
     }
  
     .fade:hover {
        opacity: 0.7;
        }
  </code></pre>
  
  <p>---Solution (at least how I did it - taken from  <a href="http://jsbin.com/igahay/1/edit?html,output)-----" rel="noreferrer">http://jsbin.com/igahay/1/edit?html,output)-----</a></p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class=picSet&gt;
              &lt;figure class="tint"&gt;
                  &lt;p id="#p1"&gt;Student in training&lt;/p&gt;
                  &lt;p id="#p2" style="position: absolute;top: 36px; color: white;"&gt;SKAT crew doing open water training&lt;/p&gt;
                  &lt;img id=pic1  src="Media/pic1.jpg" /&gt;
              &lt;/figure&gt;
      &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-CSS prettyprint-override"><code>.tint {
      position: relative;
      float: left;
      margin: 3px;
      cursor: pointer;
  }
  
  .tint:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; 
  }
  .tint:hover:before {
      content: "";
      background: rgba(96,150,179, 0.54);
      border: 5px solid #0B689A;
      border-radius: 20px;
      margin: 3px;  
  }
  .tint p{
      position:absolute;
      top:20px;
      left:20px;
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      font-size: 0.75em;
      display: none;
      color: #0B689A;
  }
   .tint:hover &gt; p{
      display: block;
  }
  </code></pre>