在鼠标悬停时在图像中心显示图标字体

Question

I´m trying to do an effect and show a search icon font when the mouse hover my "image1.png". I already did the effect with jQuery but now I do not see how I can integrate the iconic font with jquery. Has anyone done something like that? Can you give a little help?

 <article id="loop-news">
     <span id="testIcon"><I  class = "fa fa-search-plus" >  <!--show just on mouse hover -->
     <img src="image1.png" id="test" />
     <h2>Title </h2>
     <p>My Post</p>
 </article>  

My css to hide icon font at first:

#testIcon>i{display:none;}

My jquery to give an opacity effect:

 $("#test").hover(function() {
     $(this).animate({opacity: 0.5}, 500);
 }, function() {
     $(this).animate({opacity: 1.0}, 500);
 });

Answer 1

I would use CSS3 transitions if I understand your issue. In this example, I would just replace the font-family with your icon font (assuming that's how it works - never used it).

h2 {
    position: aboslute;
    margin-top: -350px;
    display: none;
    text-align: center;
    font-family: arial;
}
#loop-news:hover h2 {
    display: block;
}
#loop-news:hover img {
    opacity: .5;
}
img, h2 {
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}

JS Fiddle