Show icon font on image center on mouse hover


Tags: javascript,jquery,css,html5,css3

Problem :

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 a opacity effect:

 $("#test").hover(function() {

             $(this).animate({opacity: 0.5}, 500);

        }, function() {

            $(this).animate({opacity: 1.0}, 500);


        });


Solution :

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


    CSS Howto..

    How to make an ad wrapper which displays a message if a user has adblock running?

    How to add focus on label css style

    how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css? [closed]

    How to append text after last css class

    How to get Style From jQuery in angular2

    How to fix roll link in IE11

    how to create sprite with css [closed]

    How to remove border (outline) around text/input boxes? (Chrome) [duplicate]

    My footer keeps moving after updating other parts of my code. How do i fix this?

    How do I float a
  • to the right in CSS?
  • How to do page numbering in header/footer htmls with wkhtmltopdf?

    How to modify your CSS working with Mobile Angular UI and Bootstrap

    How to resize divs based on screen width with any approach [closed]

    How to put a div in more pages

    How to vertically align the baseline of text to a set point in HTML/CSS

    How can I change the color CSS property of an element using jQuery

    How to force my text to not break into lines in css?

    MVC How make a logout button

    How to make this css readable?

    How do I move the background image of a DIV based on the scrollbar movement?

    How can I display links in 2 rows?

    How to override CSS of RichFaces components with custom CSS

    How to make a multi category filter with JQuery, HTML and CSS

    CSS, how to create a label width of the longest containing text?

    How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

    How i can put the video showing image in front of image using jQuery css in html?

    How to get width of
  • stretched to available space in parent
      in IE7?
  • How to load local copy of bootstrap css when the cdn server is down?

    How to override CSS in joomla template

    How can I restrict the number of characters entered into an HTML Input with CSS (or jQuery, if necessary)?