title: Show icon in center of image on mouse hover
body: <p>I've been trying for a few days to show a search icon in a center of my 159 by 149 image
  on mouse hover. But I'm always getting some problem and now I don't understand what is happening. Can anyone that already tried to do this exercise give some help? Thanks!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;article class="posts"&gt;
      &lt;div style="float:left; position:relative;position: relative; clear: both; background-size:contain; background-image: url('imagens/image1.png'); width: 159px; height: 149px; padding-right: 10px; background-repeat: no-repeat;"&gt;
          &lt;a href="#" class="search_icon_hover" style="display: none; margin-left: 0px; background-color:#666; opacity:0.9; transition: 0.3s; position:absolute; top:0; bottom: 0; left:0; right: 0;"&gt;
              &lt;span id="icon_search"&gt;&lt;I class ="fa fa-search-plus" &gt; &lt;/I&gt;Hover&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function(){
  
      $(".posts").mouseenter(function(e){
          console.log('enter');
          $((e.toElement)).find('a.search_icon_hover').show();
      }).mouseleave(function(elemento) {
          $((e.toElement)).find('a.search_icon_hover').hide();
      });;
  });
  </code></pre>