title: Removing image overlay on hover
body: <p>I am trying to remove an image overlay on hover. I have the following code that adds an overlay on hover but I want it to have an opacity when not hovered upon and remove that opacity when hovered.</p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>revapi1.on('revolution.slide.onloaded', function() {
  
  revapi1.find('li').each(function() {
  
  var slide = jQuery(this);
  if(slide.find('.slidelink').length) {
  
  slide.find('.slotholder').addClass('custom-hover');
  
  }
  
  });
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.rev_slider .custom-hover {
  
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  
  } 
  
  .rev_slider:hover .custom-hover {
  
  opacity: 0.5;
  
  }
  </code></pre>
  
  <p>I have tried the following. It works but I can't get it to work with the Jquery code above. <a href="https://jsfiddle.net/z4n752zp/" rel="nofollow">Fiddle</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
  &lt;figure class="tint"&gt;
    &lt;img src="http://cdn.impressivewebs.com/2011-11/greece001.jpg" alt=""   width="400" height="260" /&gt;
   &lt;/figure&gt;
   &lt;/div&gt;    
  </code></pre>