jQuery 2044

Published on April 22nd, 2014 | by Sergiu

25

100+ FREE jQuery Image Hover Effects for 2014

jQuery and CSS3 became standards when comes about web design. There are a lot of effects that can be done on images when you go hover with mouse. There are also many interesting jQuery Tooltip plugins that can help you realize nice effects. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops. For example inside mode supports these positions: top, bottom, middle, left and right just adding class with the same class name. We invite you to take a look at these nice effects.

Hyena v1.2 Hover Effect for GIFs

Hyena offers a lightweight, responsive and high-performance solution to easily adding media controls and additional interaction to Animated GIFs. Just add class=”hyena” to your Animated GIFs and Hyena does the rest. From there you can optionally configure Events, Animation Effects, Media Controls, Skins and much more.


Hyena v1.2 Hover Effect for GIFs


Simple Stack Free CSS Hover Effects

A set of simple stack effects for inspiration. The main idea is to have one item shown initially and then, on some trigger, more items are revealed as decoration. As seen in image grids or on scroll websites as creative effect.


Simple Stack Free CSS Hover Effects


SVG Hover Effect

This hover effects pack plugin allows you to add image via shortcode, and set hover animation, text animation and text delay. This plugin adds new button to you WYSIWYG editor and options page, where you can select colors for color layer and text.


SVG Hover Effect


Social Mosaic Wall Hover Effect

Only HTML and CSS – easily editable (no javascript). Unique and beautiful design. 28 Social icons includes. 1 x PSD file with social icons (so you can create new). Set how many tiles you want eg. 4×3 or 100×300 or ….. Put whatever you want into any tile: social icons, text (as long as you want) and graphics, video and animation.


Social Mosaic Wall Hover Effect


Pentagon Hover Effect with CSS3 and jQuery

A tutorial about Creating Pentagon Hover Effect by using CSS3 and jQuery. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image.


Pentagon Hover Effect with CSS3 and jQuery


Free Image Hover Effect

Icy is a clean and elegant blogger template with Post Formats. Special thanks to ‘Artur Biernacki’ Wildweblab’s owner for allowing us to release blogger template version of Icy template. Icy blogger theme is a surprise for all those bloggers, who were anxiously waiting for another elegant responsive template. Responsive layout and Retina ready icons and images makes this template look more beautiful on any device. This Grid style template is easy to use, with responsive slider and responsive related post area.


Free Image Hover Effect


Portfolio Wall HTML CSS jQuery Hover Effect

Portfolio Wall | Joomla module 2.x 3.x is a module which make you can create wall of your works or clients or team or any thing other as you want, with an awesome 3d hover effect


Portfolio Wall HTML CSS jQuery Hover Effect


Original CSS3 Hover Effects

Pure CSS Without JavaScript or jQuery Easy to use and customize Zoom In / Zoom Out Rotate Right / Left Rotate / Scale Rotate X / Rotate Y / Rotate Z Image Opacity Layer Hover Transition


Original CSS3 Hover Effects


Nautilus SCSS/HAML hover effects

My HAML/SCSS version of http://codepen.io/indec/pen/gioqx by Ian Malpass with some added hover effects. -Zach


Nautilus SCSS/HAML hover effects


Hover.css – A Collection of CSS3 Hover Effects

Hover.css is a collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS. A repository by IanLunn.


Hover.css – A Collection of CSS3 Hover Effects


Playing with CSS3 Animations

The example described below is the first of four demos, all of which are using the same JS file, CSS class names, and are based on the same operating principles. All demos have been tested on Chrome, Safari, Firefox, Opera, IE11 and IE10 (also on iOS). They are not intended for production; they are simply provided as tangible case studies. Additionally, you may have to implement some fallbacks for users (especially those using old IE browsers), something beyond the scope of this article.


Playing with CSS3 Animations


Hover Effects Pack jQuery Gallery Plugin

This hover pack allows you to add animation effects to images, when it hovered. Also you have ability to add text, that will go over image, and this text also can be animated. In this pack you can find 10 image animation effects and 10 animation effects for text, that goes over image. Also you can combine several text animation effects for one item.


Hover Effects Pack jQuery Gallery Plugin


CSS Powered Buttons with Hover Effect Tooltips

Here is another social media buttons we did earlier today, you can add them to you next project, I’m only using social media button as an example, you can pretty much use them for any purposes. From the image you probably noticed the tool tip effect, check out the demo to see the button in action.


CSS Powered Buttons with Hover Effect Tooltips


Hover Effects Pack – WordPress Plugin

This hover effects pack plugin allows you to add image via shortcode, and set hover animation, text animation and text delay. This plugin adds new button to you WYSIWYG editor and options page, where you can select colors for color layer and text.


Hover Effects Pack – WordPress Plugin


Animation CSS3 3D Grid jQuery Hover Effect

It’s the recreation of an effect we spotted inthis fantastic prototype app by Marcus Eckert. The idea is to rotate a grid item in 3D, expand it into fullscreen and reveal some content. For our attempt to imitate the app behavior, we created two demos. In the first one we rotate the grid item vertically and in the second one horizontally.


Animation CSS3 3D Grid jQuery Hover Effect


Animated Opening Type CSS Hover Effect

A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.


Animated Opening Type CSS Hover Effect


Pure CSS3 Image Hover Effects

Pure CSS3 Image Hover Effects is 30 Pure image hover effects which is suitable for portfolio, image gallery and much more. Its support major browser. You can easily use this effects. I have just give you ideas about effects you can develop more creative from this effects.


Pure CSS3 Image Hover Effects


jQuery Hover Effect Plugins (Premium)

This hover pack allows you to add animation effects to images, when it hovered. Also you have ability to add text, that will go over image, and this text also can be animated. In this pack you can find 5 image animation effects and 6 animation effects for text, that goes over image. Also you can combine several text animation effects for one item.


jQuery Hover Effect Plugins (Premium)


Ecommerce Product Display Free CSS Hover Effect

Using standard widths and floats instead of css columns so that it will work in all browsers.


Ecommerce Product Display Free CSS Hover Effect


3D Grid Free jQuery CSS Hover Effect

A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We’ve created two demos with a vertical and a horizontal rotation.


3D Grid Free jQuery CSS Hover Effect


Shape Hover Effect With SVG

In this tutorial you ll create really cool hover effect. You ll be using SVG for the shape and Snap.svg for animating it on hover. The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover.


Shape Hover Effect With SVG


Animations for Thumbnail Grids Hover Effect

There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy effects and today we’d like to show you some inspiration for thumbnail effects using CSS animations.


Animations for Thumbnail Grids Hover Effect


Border Effect

My HAML/SCSS version of http://codepen.io/indec/pen/gioqx by Ian Malpass with some added hover effects. -Zach


Border Effect


Tags: , , , , , , , , ,


About the Author



25 Responses to 100+ FREE jQuery Image Hover Effects for 2014

  1. Beavis says:

    I was planning on learning Javascript but I hear that jQuery is just a simplified version of Javascript. So should I just learn jQuery? Or Javascript? Thanks.

  2. Jeremy Xargor is my gamertag says:

    I am using scrollTo and localscroll along with Lightbox 2.0 and they are not working together…its either one or the other depending on the order i put them. I looked into the JQuery.noConflict() but not sure how it works.

    this is my codes using multiple jquery libraries

    $(document).ready(function () {
    $.localScroll.defaults.axis = ‘x’;
    $.localScroll();
    });

  3. Malcolm Hudson says:

    For instance, I want to use one of their date pickers like this one:

    http://jqueryui.com/datepicker/#default

    If you look at the source code for this widget, the linked javascript sheets and linked css link up to their site directly. For example in this code it has:

    Am I supposed to take that code and change it all to my own directory on my computer/host, or use their site? The site is just for example right? Also, if I’m supposed to put it all on my local system, how do I get the css for this code? Is it somewhere in the documentation for this particular widget? And why do they have references to two jQuery scripts (1.8.3 and 1.10.0)

    Sincerely, Sir. Confused

  4. Ryan Dunn says:

    I am looking for a button that has similar actions to a a jquery accordian menu. I want it to appear like a simple button but when pressed, instead of linking somewhere it will expand and show hidden content. I was thinking i could use an accordian for this and just have one menu item.

    But one of the required functions is that when the menu expands the title (the actual button) moves down to the bottom of the content. then when clicked it moves back up in place hiding the content again.

    It seems the accordians do EXACTLY this only that the header stays at the top always and never moves down to the bottom. has anyone seen anything like this?

  5. Shay H says:

    I would like to know is jQuery capable of doing advanced things. I would like to build basic social network for my school and I was wondering if jQuery was capable of doing such a thing.

  6. Gamer959 says:

    there is $ not defined in my jquery.
    in html i have added

    please help what is wrong

  7. happyha31 says:

    JAI MATADI ..

    hello .. i m getting problem in JQUERY coding .. here is my code with confusion ..

    ————————————————

    $(document).ready(function()
    {

    $(“button”).click(function()
    {
    $(“.i1”).css({“src”:”2.jpg”});
    });
    });

    Click here

    ————————————————

    but when i click on the button my image is not being changed … please give me the correct code for it ..

    thank you ..

  8. Jeff says:

    and implement it in my HTML document?

  9. Ryan Dunn says:

    can you please take a look at this webpage and let me know what does the slideshow been used called and do you know a tutorial for it
    http://www.samsung.com/uk/consumer/mobile-devices/smartphones

  10. Caltel T says:

    it seems that anything that can be done in javascript can be done in jquery, usually with less writing
    so is there any need to learn classic javascript if you’re planning to learn jquery for web design/developement?

  11. Nathan B says:

    I’m trying to have this container on my website:
    http://itsahedgehogisntit.tumblr.com/

    when you click on “about”, the container is displayed and hidden when about it clicked on once more.
    How is this done from scratch?

  12. sethburger says:

    When I write plain javascript in Weebly, it works perfectly fine. But when I plug-in jQuery, it doesn’t function at all.

    Is there a solution out there to this?
    If so, what is it?
    If not. -sad face-

  13. Peter says:

    Hello there, I come from a graphic / web designer point of view and my only coding knowledge is intermediate to advanced HTML and CSS skills, although I am now looking towards developing knowledge on more dynamic web experiences so I wanted to ask if I want to learn how to do basic dynamic website like slideshows, fades, tabs and mouse in animations should I learn JQuery? Is this the right language to develop my skills in? Also is JQuery sufficient for this use or should I learn to code from scratch using JavaScript?

    Thank you very much
    -JL

  14. tefa_96 says:

    Programming

  15. davemc74656 says:

    As javascript is not supported by old browsers and is also possible that user may disable it so can we use jquery instead of javascript to validate forms???
    second question is… I came to know that you must do validation on both client and server side… So if i does this… Suppose a error occurs on a login form and i have done validation on both sides then there is a possibility that 2 error messages will be generated. One through JavaScript and another through php… And ofcourse that situation would be unwanted…. Please clear my doubts… Its a bit confusing… Thank u…

  16. cardskid22 says:

    I’ve gone back to the basics and I’m just wondering what are your thoughts on learning classic JavaScript prior to jQuery.

  17. Picean says:

    I’ve decided to use a javascript library or framework in my website and I’m having trouble deciding whether I should use jQuery or Dojo. I’m also not sure which library has a better UI (User Interface)

  18. Benihana says:

    if im correct its sort of a set of javascript classes, html and graphics which allows people to do some stuff that they would like to and can be done in javascript by anyone who knows javascript, but it saves times by preventing people from reinventing the wheel. Am i right.
    If yes, then why there are different versions like jquery and mojo, why cant there be one open source project that crater all the good stuff. Having multiple collections of classes of javascript for the same thing kinda beats the point of having them. Why waste time developing two separate platforms for efficiency, for example, when the whole purpose was to help people not write everything down from point a to z.

  19. D3ZZY says:

    I am making a website for my coursework and I am combining the use of PHP, MySQL and AJAX via JQuery to complete the C/W. My question is, how can I display the contents from the MySQL database onto my webpage dymacilly without the page refresh when I click the search button. I also want it to display “no results found” if that was the case.

    Please help me out with where to start with this,

    Thank you, much appreciated!
    No harm in trying!

  20. diggn4richez says:

    I am new on J Query. I don’t know how to use jquery. Can anyone tell me step by step process to use it in Dreamweaver. I have a little knowledge of html.

  21. Marshal says:

    Can it work?
    I’m teaching myself php and I was looking to use a slide toggle function.
    When clicked the panel should reveal and then become hidden once again on a second click.

    My javascript
    <script src="jquery-1.8.3.js"

    $(document).ready(function(){
    $(“#flip”).click(function(){
    $(“#panel”, this).slideToggle();
    });
    });

    <?php
    echo "Recipe Title: “.$row[‘name’].”
    ?>

    <?php
    echo "Caters for: ".$row['condition']."Preparation Time: “.$row[‘prep’].”Cooking Time: “.$row[‘cook’].”Servings: “.$row[‘serves’].”Ingredients: “.$row[‘Ingred’].”Step By Step method: “.$row[‘method’].”Any tips: “.$row[‘tips’].””;
    ?>

    After reading online some people just say that its better to just use raw HTML and use php tags inside but I don’t know. Any help would be great. Thank you
    I meant to enter in the while loop to fetch the query

    $condition=$_GET[‘condition’];
    $query = pg_query(“SELECT * FROM cs353teamf.recipe WHERE condition=’$condition'”);
    while ($row = pg_fetch_assoc($query))
    {

    echo ‘Recipe Title: “‘.$row[‘name’].'”‘;
    echo ‘
    Caters for: “‘.$row[‘condition’].'”
    Preparation Time: “‘.$row[‘prep’].'”
    Cooking Time: “‘.$row[‘cook’].'”
    Servings: “‘.$row[‘serves’].'”
    Ingredients: “‘.$row[‘Ingred’].'”
    Step By Step method: “‘.$row[‘method’].'”
    Any tips: “‘.$row[‘tips’].'”‘;
    }

    How do I have divs in the while loop?

  22. kiltakblog says:

    I’m having a problem on a website. I’ve gotten an error message saying something about JQuery being missing. I can’t see avatars, type, or even see buttons. The only thing I can do is read forum posts. How do I fix this. Do I need to change the website source code, and if so, how?
    I hope someone knows how use JQuery
    P.S. if you have no clue and are just going to say Download it, it’s not an installer. What I get from the download page is a long list of code. JQuery is NOT an application.

  23. llb443 says:

    I’m having problems toggling more than 2 divs. The idea of course is to toggle through
    multiple divs only displaying one at a time. I’v been trying different things but to no avail.
    Please someone help me with this. Thanks in advance for any assistance and help.

    Toggle

  24. davemc74656 says:

    I am learning Java script through codecademy. If i know java script how much time it will take to learn jquery ????

  25. JackReynolds says:

    i have recently implemented jquery in my website to provide a fix to back buttons in ajax XHRequests.
    However i notice plugins etc are all over the internet for this framework.
    What is the sole purpose of jquery? Is it to use ajax calls in websites or is it used to add classes easier to java functions etc? I dont fully understand this.
    Can someone provide a good example of what jquery is used for?

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ↑