title: Jquery Rollover fade
body: <p>I would like to know if someone could help me with this code ? I would like to add an opacity transition with a fadeIn/fadeOut. I already try alone but I'm beginner in jQuery so I don't succeed it :(</p>
  
  <p>Thank you very much !</p>
  
  <p><strong>THE CODE</strong></p>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('img.article01').hover(function () {
              this.src = 'imgColor.jpg';
          }, function () {
              this.src = 'imgGray.jpg';
          });
      });    
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Css</strong></p>
  
  <pre><code>img {
      max-width: 100%; /*very important*/
  }
  
  .figure {
      width: 100%;
  }
  
  .thumbTitle {
      position: absolute;
      font-size: 1em;
      padding-left: 25px;
      color: #fff;
  }
  </code></pre>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;article class="padding"&gt;
  
      &lt;h2 class="thumbTitle"&gt;Project 01&lt;/h2&gt;
  
      &lt;div class="figure"&gt;
          &lt;a href="projet01.html" class="thumb"&gt;
              &lt;img src="imgGray.jpg" class="article01" /&gt;
          &lt;/a&gt; 
      &lt;/div&gt;
  
  &lt;/article&gt;
  </code></pre>