Pencil - Scoopz: Web Development

Showing posts with label Web Development. Show all posts

Animate SVG Icons with CSS3 & jQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrI_VY0K3YF_ilnrgMcn2LC_KqyD1VgQLfiEuIoVq_XmjxpGS3ARNm2dUSTcrPvP413CV84XHL7ILjpkvKfJSaAl4u8dHqr8gS51O3DoNZQBy1PVKtI2C-86dZbktvbgtVHM5bXMeT_9hA/s1600/SVG_animation-800x400.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrI_VY0K3YF_ilnrgMcn2LC_KqyD1VgQLfiEuIoVq_XmjxpGS3ARNm2dUSTcrPvP413CV84XHL7ILjpkvKfJSaAl4u8dHqr8gS51O3DoNZQBy1PVKtI2C-86dZbktvbgtVHM5bXMeT_9hA/s640/SVG_animation-800x400.jpg" width="640" /></a></div>Recently, there’s been a lot of buzz throughout the web design and development community on using SVG for icons. Due to a number of limitations and inconveniences, using raster-based images for your icons, has become an increasingly painful and restricting endevour. There are a number of reasons why a raster based image for the purposes icons, have become obsolete. I covered this and explored a number of viable solutions in this article <a href="http://www.pencilscoop.com/2013/11/svg-and-icon-fonts-the-future-of-iconography/" title="SVG and Icon Fonts: The Future Of Iconography">here</a>, which is worth reading if you are mostly unfamiliar with the use of SVG in web development. I explored a number of different methods of implementing icons including, pure CSS, icon fonts, and SVG. However a lot of people are still unfamiliar with SVG styling and implementation, as there isn’t yet a widely-accepted definitive way that works well. Which brings us to this article. In this tutorial I will be showing you how to create, implement, animate and style SVG icons on the web using simple markup. I’m assuming, if you’ve made it this far, that you have at minimal, a basic understanding of CSS, HTML, a little JavaScript and Adobe Illustrator. If you are completely unfamiliar with SVG, I would recommend reading <a href="http://css-tricks.com/using-svg/">this article</a> on SVG basics over at CSS-Tricks prior to going any further. Let’s get started. <a name="more"></a> <hr class="separator" /><hr class="space" /><div style="text-align: center;"><a class="btn sunset small" href="http://pencilscoop.com/demos/svg/rocket/index.html" target="_blank">Full Demo</a> <a class="btn sunset small" href="http://pencilscoop.com/demos/svg/rocket_animation.zip" target="_blank">Download Source</a> <a class="btn sunset small" href="http://pencilscoop.com/demos/svg/CSS%20Only%20Version/index.html" target="_blank">CSS Only Demo</a></div><h3>Prepping SVG</h3>For the purposes of this article, we are going to be using a rocket icon (originally designed by <a href="http://dribbble.com/shots/1062569-Flat-icons-PSD-2?list=users">Pierre Borodin</a>), although I slightly modified the icon and converted it to SVG. You can download the Adobe Illustrator file <a href="http://pencilscoop.com/demos/svg/rocket/Icon/rocket_icon.ai">here</a>. On a side note, if you prefer to work with your own icon, feel free to do so, the basic methods will remain the same. Open up the file in Illustrator, click “Save As” and select “.SVG“. Once you click save, the “SVG Save Options” dialog will pop-up. You can then click on “SVG Code” which will open the XML code for the file in a text editor. <img alt="save_svg_file" class="alignnone size-full wp-image-10076" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/save_svg_file.jpg" /> This is a useful feature, however all the CSS that is used to style the SVG is embedded in “inline” format within the various paths. This is a problem, as we won’t be able to do any custom styling or animation. <img alt="svg_css_problem" class="alignnone wp-image-10077" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/svg_css_problem.jpg" style="border: 1px solid black;" /> Separating all that CSS manually would be a pain, so we are going separate it automatically later. For now, go ahead and save the SVG using all the default save options. To seperate all the CSS so it’s not inline we’ll use a free online <a href="http://petercollingridge.appspot.com/svg_optimiser">SVG Optimiser</a> tool by Peter Collingridge. Upload the SVG you saved from Illustrator, check the “convert styles to CSS” box and download the new SVG file. Open the file up in a text editor or whatever program you use to code. <img alt="svg_CSS_seperated" class="alignnone wp-image-10078" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/svg_CSS_seperated.jpg" style="border: 1px solid black;" /> You’ll notice that all the CSS styling is now separated from all SVG-path markup, which is good. You’ll also notice that there are a number of class’s and ID’s attached within the markup, similar to traditional HTML markup. Additionally you should see some “<g></g>” elements. The classes and IDs work pretty much the same as HTML and can be manipulated in CSS. In SVG <g> is a grouping element and works in a similar way as a”div” would in HTML. It’s worth noting that when you do your designing in Illustrator, a layer will be represented as a group (<g>) in SVG markup, which is all the more reason to name and organise your layering appropriately. <img alt="illustrator_layers" class="alignnone size-full wp-image-10079" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/illustrator_layers.jpg" /> <hr class="separator" /><h3>Cleaning Up SVG for Web Use</h3>In order to use SVG’s to to their full potential, we need to clean a few things up. There are two things we need to do. Firstly – Illustrator’s back-end leaves all the grouping ID’s with arbitrary characters in their name. Secondly, the SVG optimizer we used, adds generic styling classes such as “style1, style2, style 3“..etc. We need to go through the file and rename all the styles and IDs appropriately so we can work on them later. Here I have cleaned up the SVG markup, which looks like this: </div><div style="text-align: left;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="307px" height="283px" viewBox="0 0 307 283" enable-background="new 0 0 307 283" xml:space="preserve"> <g class="rocket_wrap"> <circle cx="147.5" cy="138.6" r="105.5" class="icon_circle"/> <g class="rocket_inner"> <g class="fire" id="fireMiddle"> <path class="fire_path" d="M148.891,179.906c3.928,0,7.111,3.176,7.111,7.094 c0,7.78-7.111,16-7.111,16s-7.111-8.349-7.111-16C141.78,183.082,144.963,179.906,148.891,179.906z"/> </g> <g class="fire" id="fireRight"> <path class="fire_path" d="M154.063,181.092c3.577-1.624,7.788-0.048,9.408,3.52 c3.216,7.084,0.139,17.508,0.139,17.508s-9.927-4.662-13.09-11.63C148.9,186.923,150.487,182.715,154.063,181.092z"/> </g> <g class="fire" id="fireLeft"> <path class="fire_path" d="M143.392,182.519c3.25,2.207,4.098,6.623,1.896,9.864 c-4.372,6.436-14.873,9.238-14.873,9.238s-1.191-10.902,3.108-17.23C135.725,181.149,140.143,180.312,143.392,182.519z"/> </g> <g class="fire" id="fireSmallLeft"> <path class="fire_path" d="M143.193 187.531c2.226 0.4 3.7 2.6 3.2 4.8 c-0.875 4.407-5.829 8.264-5.829 8.264s-3.09-5.53-2.229-9.865C138.807 188.5 141 187.1 143.2 187.531z"/> </g> <g class="fire" id="fireSmallRight"> <path class="fire_path" d="M152.089 188.599c2.043-0.985 4.496-0.132 5.5 1.9 c1.952 4 0.3 10.1 0.3 10.107s-5.795-2.56-7.713-6.541C149.186 192 150 189.6 152.1 188.599z"/> </g> <path class="rocket_bottom" d="M157.069 171.31h-3.292c-1.562-0.048-3.178-0.076-4.846-0.076 s-3.284 0.028-4.846 0.076h-3.292c-7.277-7.938-12.371-26.182-12.371-47.434c0-28.54 9.182-51.676 20.508-51.676 c11.327 0 20.5 23.1 20.5 51.676C169.44 145.1 164.3 163.4 157.1 171.31z"/> <g id="right_wing_wrap"> <path class="wing_base" d="M166.678 127.161c0 0 17.7 3.3 12.9 48.099l-18.06-14.05 L166.678 127.161z"/> <path class="wing_shadow" d="M158.225 140.336c10.481-5.584 22.7 22.2 21.4 34.9 l-18.06-14.05C161.542 161.2 156.1 144.3 158.2 140.336z"/> </g> <g id="left_wing_wrap"> <path class="wing_base" d="M135.131 161.21l-18.06 14.1 c-4.805-44.793 12.924-48.099 12.924-48.099L135.131 161.21z"/> <path class="wing_shadow" d="M135.131 161.21l-18.06 14.1 c-1.367-12.746 10.896-40.509 21.377-34.924C140.614 144.3 135.1 161.2 135.1 161.21z"/> </g> <g id="rocket_body_wrap"> <path class="rocket_base" d="M162.728 167.358c-3.778-0.623-8.573-0.996-13.796-0.996 s-10.018 0.373-13.795 0.996c-5.033-10.186-8.257-25.808-8.257-43.338c0-30.688 9.873-55.566 22.052-55.566 s22.053 24.9 22.1 55.566C170.984 141.6 167.8 157.2 162.7 167.358z" /> <path class="rocket_shadow" d="M145.464 166.417c19.578-40.575 7.26-85.229 4.112-98.067 c11.88 0.9 21.4 25.4 21.4 55.525c0 17.529-3.225 33.152-8.257 43.337c0 0-3.786-0.472-8.069-0.697 S145.464 166.4 145.5 166.417z"/> </g> <g id="large_window_wrap"> <radialgradient id="SVGID_2_" cx="148.9" cy="112.5" r="15.2" fx="139.4853" fy="112.5239" gradientunits="userSpaceOnUse"> <stop offset="0" class="window_grandient"/> <stop offset="0.5868" class="window_grandient"/> <stop offset="0.6834" class="window_grandient"/> <stop offset="0.6845" class="window_grandient1"/> <stop offset="0.6861" class="window_grandient2"/> <stop offset="0.6897" class="window_grandient3"/> </radialgradient> <circle class="large_window_path" cx="148.9" cy="111.3" r="10.5"/> </g> <circle class="small_window_path" cx="148.9" cy="132.4" r="5.2"/> </g> </g> </svg></div><div><hr class="separator" /><h3>Setting Up</h3>We’re going to make 3 states for this icon – a inactive state, a hover state, and a toggled click state. We’ll use a combination of mainly CSS, with a tiny bit of JavaScript to achieve this. If you don’t need the click function and just want a hover state, you can animate everything using only CSS without including any JavaScript at all. However I thought we should cover the JavaScript anyway. <img alt="SVG_states" class="alignnone size-full wp-image-10081" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/SVG_states.jpg" /> For the purposes of this tutorial, we’ll be writing all our markup inline, into one document. However if you’re working on a larger project, you can easily use PHP, JavaScript or simply an HTML “<object>” with the src set to the external SVG file to insert SVG markup into your pages. Also, we won’t be adding all the browser prefixes (-webkit, -O-, etc..) to the CSS, purely for the benefit of not bloating the tutorial markup. However you should use the correct vendor prefixes to ensure browser compatibility. You can add browser prefixes automatically using <a href="http://prefixr.com/">this prefixer</a> from Nettuts+. Setup a blank HTML document and paste your SVG code into the body, remove the CSS from SVG markup and place it in the head of document. You can actually delete the default styles from the document altogether, as we we’ll be custom styling the icon ourselves. </div><!DOCTYPE html> <head> <title>SVG Icon Animation</title> <style> /* SVG Styles Go Here */ </style> </head> <body> <div id="pageWrap"> <svg">  </svg> </div> </body> </html> <div><hr class="separator" /><h3>Styling SVG with CSS</h3>Now let’s start to style our SVG markup. Before we worry about animating the icon, let’s just focus on making the hover and inactive states. We’ll start with the inactive state: </div><div style="text-align: left;">/*============================================= [ Page Setup ] ==============================================*/ body{background:#34495e} #pageWrap {width:100%;overflow:hidden;} #rocket{display:block;margin:0 auto;margin-top:150px;} /*============================================= [ Inactive State Styles ] ==============================================*/ .rocket_inner { transform: translateY(15px) translateX(-3px); transition: .3s; } .icon_circle { transition: .2s; fill: #22303e; } .large_window_path { transition: .2s; fill: #22303e; } .small_window_path { transition: .2s; fill: #22303e; } .wing_shadow { fill: #34495e; } .rocket_bottom { fill: #34495e } .rocket_base { fill: #34495e } .rocket_shadow { fill: #34495e } .window_grandient { stop-color: #2DCB73 } .window_grandient1 { stop-color: #2AC16D } .window_grandient2 { stop-color: #29B968 } .window_grandient3 { stop-color: #28B767 } .wing_base { fill: #34495e } .fire_path { fill: #FC0 } .fire {display: none;}</div><div>As you can see, there are a number of elements we have styled using <a href="http://www.w3.org/TR/SVG/styling.html">SVG styling markup for CSS</a>. You can get more intricate with your styling, however you mostly only need to use the fill, stroke and stroke-width attributes. You’ll notice there’s a gradient fill as well, which was setup in Illustrator. This makes a reflection-gradient for the top window on the rocket once it’s animated. If you load your page in the browser now, your icon should look like this: <img alt="SVG_icon_inactive" class="alignnone size-full wp-image-10082" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/SVG_icon_inactive.jpg" /> <hr class="space" />Now into the hover effect. SVG class’s and IDs act as you would expect them to in regards to CSS. We can add a number of hover effects using <a href="http://www.w3.org/TR/SVG/styling.html">attributes</a>. </div><div style="text-align: left;">/*============================================= [ Hover Styles ] ==============================================*/ .rocket_wrap:hover .icon_circle { fill: #34495e; stroke: #fff; stroke-width: 3px; } .rocket_wrap:hover .rocket_base { fill: #fff; stroke: #fff; stroke-width: 3px; } .rocket_wrap:hover .small_window_path { fill: #34495e; stroke: #fff; stroke-width: 2px; } .rocket_wrap:hover .rocket_bottom { fill: #fff; stroke: #fff; } .rocket_wrap:hover .wing_base { fill: #fff; stroke: #fff; stroke-width: 3px; } .rocket_wrap:hover .large_window_path { fill: #34495e; stroke: #fff; stroke-width: 2px; } .rocket_wrap:hover .wing_shadow { display: none } .rocket_wrap:hover .rocket_shadow { fill: #fff }</div><div>Here we are basically changing the fill and stroke colors along with the stroke widths. It’s relatively straight forward and mostly self-explanatory. You can play around with all kinds of things like opacity, sizes, stroke caps and more. Load your page again and hover on/off the icon. It should change states. Pretty cool right? <img alt="SVG_icon_hover" class="alignnone size-full wp-image-10083" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/SVG_icon_hover.jpg" /> <hr class="separator" /><h3>Animating SVG With CSS</h3>There are a number of JavaScript plugins to animate SVG, and I expect these will develop further and become more user-friendly in the future. However you can achieve most effects using simple CSS and CSS keyframes. If you’re not familiar with CSS keyframes, Chris Coyier has a good intro article <a href="http://css-tricks.com/snippets/css/keyframe-animation-syntax/">here</a> on CSS-Tricks. If you don’t want any JavaScript, you can use CSS “@keyframe” animation properties using simple “:hover” effects. However we will use a little bit of JavaScript to toggle them on click. We’ll get to that later though, for now let’s just set-up the keyframes and click classes. We’ll setup our animation through 3 sets of classes. The SVG paths that don’t require animation but simply need to change color, will have a clicked class. Then for the elements that need to be animated, we’ll add a clicked class which contains the animation name of an “@keyframe” animation. Then we’ll apply them to their respective elements with a “.click” function using JavaScript. Let’s look at the static elements that just need a color change: </div><div style="text-align: left;">/*============================================= [ Clicked Styles ] ==============================================*/ .baseClicked { fill: #FFFFFF !important; stroke-width: 0px !important; } .shadowClicked { fill: #EDEDED !important; stroke-width: 0px !important; } .iconCircleClicked { fill: #282e3a !important; stroke: #fff !important; stroke-width: 7px !important; } .smallWindowClicked { fill: #28B767 !important; stroke-width: 0px !important; } .wingShadowClicked { display: block !important; fill: #FC9252 !important; } .wingBaseClicked { fill: #E16E36 !important; stroke-width: 0px !important; } .rocketBottomClicked { fill: #2DCB73 !important; stroke-width: 0px !important; } .largeWindowClicked { fill: url(#SVGID_2_) !important; stroke-width: 0px !important; } .innerClicked { transform: translateY(0px) translateX(-3px) !important; }</div><div>These are our classes that we’ll append to the icon’s various elements later. Again, these are mostly self explanatory changes to fill and stroke attributes. You’ll notice however that they all have an “!important” declaration. This resolves the issue of CSS hover effects being displayed while JavaScript click classes are active by overriding the “:hover” property. Now for the animation of the fire. You’ll notice the SVG file has 5 fire flames at the bottom. By default these aren’t visible as we have made them invisible using CSS using “display:none” Each fire element has it’s own ID, while sharing the same class. This way we can display them all at once while animating them individually. Let’s add our animation markup: </div><div style="text-align: left;">/*============================================= [ Animation Classes ] ==============================================*/ .fire { display: none; animation-delay: 0s; fill-opacity: 1; animation-timing-function: ease-in; stroke-width: 0px; animation-iteration-count: infinite; animation-timing-function: linear; transform-origin: 50% 50%; animation-direction: normal; } .clickedLeft { display: block; animation-delay: 0s; animation-name: fireLeft, fillOpacity1; animation-duration: 1.2s; } .clickedMiddle { display: block; animation-delay: 0s; animation-name: fireMiddle, fillOpacity1; animation-duration: 1s; } .clickedRight { display: block; animation-delay: 0s; animation-name: fireRight, fillOpacity1; animation-duration: 1.3s; } .clickedSmallLeft { display: block; animation-delay: 0s; animation-name: fireSmall, fillOpacity2; animation-duration: 1.3s; transform-origin: bottom; } .clickedSmallRight { display: block; animation-delay: 0.3s; animation-name: fireSmall, fillOpacity3; animation-duration: 1.6s; transform-origin: bottom; }</div><div>Notice we have two “animation-name“s for each element, one for fill-opacity and another for transforms. The reason we’re not using a single animation for every element is so it they all animate in slightly different ways. If they all shared a single keyframe animation, the result would look automated an unnatural. If you don’t want to use any JavasSript, you can add these classes as CSS “:hover” effects using the regular mark-up classes. Let’s setup the keyframes: </div><div style="text-align: left;">/*============================================= [ KeyFrame Animations ] ==============================================*/ @keyframes fireSmall { 10% { transform: rotate(17deg) translateY(1px) } 20% { transform: rotate(-13deg) translateY(2px) } 30% { transform: rotate(21deg) translateY(3px) } 40% { transform: rotate(-34deg)translateY(4px) } 50% { transform: rotate(24deg) translateY(5px) } 60% { transform: rotate(-17deg) translateY(6px) } 70% { transform: rotate(31deg) translateY(7px) } 80% { transform: rotate(-28deg) translateY(8px) } 90% { transform: rotate(14deg) translateY(9px) } 99% { transform: rotate(0deg) translateY(10px) } } @keyframes fireLeft { 6% { transform: rotate(25deg) } 15% { transform: rotate(-19deg) } 25% { transform: rotate(25deg) } 32% { transform: rotate(-30deg) } 46% { transform: rotate(22deg) } 54% { transform: rotate(-29deg) } 61% { transform: rotate(32deg) } 74% { transform: rotate(-9deg) } 83% { transform: rotate(16deg) } 99% { transform: rotate(0deg) } } @keyframes fireMiddle { 10% { transform: rotate(25deg) } 20% { transform: rotate(-25deg) } 30% { transform: rotate(30deg) } 40% { transform: rotate(-22deg) } 50% { transform: rotate(29deg) } 60% { transform: rotate(-45deg) } 70% { transform: rotate(37deg) } 80% { transform: rotate(-15deg) } 90% { transform: rotate(16deg) } 99% { transform: rotate(0deg) } } @keyframes fireRight { 15% { transform: rotate(17deg) } 23% { transform: rotate(-13deg) } 37% { transform: rotate(21deg) } 45% { transform: rotate(-34deg) } 54% { transform: rotate(24deg) } 67% { transform: rotate(-17deg) } 72% { transform: rotate(31deg) } 84% { transform: rotate(-28deg) } 96% { transform: rotate(14deg) } 99% { transform: rotate(0deg) } } @keyframes fillOpacity1 { 0% { fill-opacity: 1; stroke-opacity: 1; } 50% { fill-opacity: 1; stroke-opacity: 1; } 100% { fill-opacity: 0; stroke-opacity: 0; } } @keyframes fillOpacity2 { 0% { fill-opacity: 1; stroke-opacity: 1; } 25% { fill-opacity: 1; stroke-opacity: 1; } 100% { fill-opacity: 0; stroke-opacity: 0; } } @keyframes fillOpacity3 { 0% { fill-opacity: 1; stroke-opacity: 1; } 67% { fill-opacity: 1; stroke-opacity: 1; } 100% { fill-opacity: 0; stroke-opacity: 0; } } @keyframes rocektMove { 0% { transform: translateY(0px) } 100% { transform: translateY(20px) } }</div><div>This sets-up our keyframing for the fire animation as well as the rocket itself. CSS uses percentages to set each keyframe at a percentage of the total animation, which is defined in time using the “animation-duration:” attribute. <hr class="separator" /><h3>Applying CSS Classes to SVG using JavaScript</h3>This ins’t something that is easy to achieve, there are a number of complications to consider. Firstly jQeury selectors don’t work on SVG markup. So you can’t select a class/ID and add/toggle a CSS class the way you normally would. Fortunately Keith Wood has built a number of <a href="http://keith-wood.name/svg.html">JavaScript plugins</a> specifically for this (and for other SVG/jQuery related issues). We need to include his plugin so our JavaScript can read the SVG DOM. Head over and download the jQuery plugin <a href="http://keith-wood.name/svg.html">here</a> and add the “jquery.svg.js” and “jquery.svgdom.js” files to your document folder, as well as including a jQuery library. Insert the following in the head of your document below the CSS. </div><div style="text-align: left;"><script src="jquery.min.js"></script> <script src="jquery.svg.js"></script> <script src="jquery.svgdom.js"></script></div><div>Now we can access the SVG DOM using JavaScript selectors and add our CSS animation classes. Add the following below the SVG markup of the document: </div><div style="text-align: left;"><script type="text/javascript"> $(".rocket_wrap").click(function() { $("#fireLeft").toggleClass("clickedLeft"); $("#fireMiddle").toggleClass("clickedMiddle"); $("#fireRight").toggleClass("clickedRight"); $("#fireSmallRight").toggleClass("clickedSmallRight"); $("#fireSmallLeft").toggleClass("clickedSmallLeft"); $(".rocket_inner").toggleClass("innerClicked"); $(".rocket_base").toggleClass("baseClicked"); $(".rocket_shadow").toggleClass("shadowClicked"); $(".large_window_path").toggleClass("largeWindowClicked"); $(".small_window_path").toggleClass("smallWindowClicked"); $(".rocket_bottom").toggleClass("rocketBottomClicked"); $(".wing_base").toggleClass("wingBaseClicked"); $(".wing_shadow").toggleClass("wingShadowClicked"); $(".icon_circle").toggleClass("iconCircleClicked"); }); </script></div><div>Again, this is pretty self explanatory. If you’re not that familiar with jQuery, we are setting a click function for the rocket icon, then using a toggle function to add/remove the CSS animation classes. As we noted above, the “!impotant” deceleration in CSS will override the hover state when these are added. There are some considerations here though. Most notably that you can only access inline, internal SVG DOMs with jQeury. If you use a data attribute in an <object> for an externally stored SVG file, the jQuery won’t work. However, as I noted above there are a number of solutions to this issue depending on what you’re working with. I have included some links in the additional info section at the bottom of this article. <hr class="separator" /><h3>An Update On Firefox (Updated 23.12.2013)</h3>After playing around with a number of CSS properties regarding the animation of SVG, I realised that Firefox does not interpret the CSS attribute “transform-origin:” when animating SVG groups (<g>). Regardless of whether you prefix it, or where you put it (either in the @keyframe or on the group  selector). So “-moz-transform-origin:” won’t work, no matter what. However it does work on SVG paths. If you’re not rotaing anything, this probably won’t cause an issue. However to ensure browser compatibility, you should use ID and class selectors on the SVG path elements, not groups. Hopefully this get’s fixed some time soon by the Moz dev team. The only issue this causes is that animating a group of paths with the same transform origin can be fickle, as you need to go through each path element and set their individual transform origins to the same point relative to each path (rather than just grouping them). <hr class="separator" /><div style="text-align: center;"><a class="btn sunset small" href="http://pencilscoop.com/demos/svg/rocket/index.html" target="_blank">Full Demo</a> <a class="btn sunset small" href="http://pencilscoop.com/demos/svg/rocket_animation.zip" target="_blank">Download Source</a> <a class="btn sunset small" href="http://pencilscoop.com/demos/svg/CSS%20Only%20Version/index.html" target="_blank">CSS Only Demo</a></div><hr class="separator" /><h3>Summary</h3>So as you can see, we are able to animate SVGs with simple CSS “@keyframe” animations. The demo above shows the animation with no jQuery at all. Having said that, this is just one way to animate SVG using simple markup. There are already a number of jQuery libraries, plugins and other useful web apps that you can use. I’ve included a number of useful links below. On a final note, one thing I’d like to add is the best thing about animating an icon this way and probably the biggest advantage over using a third-party plugin, is that you can include all your CSS styling and animation mark-up directly in the SVG file itself (rather than in your page’s stylesheet). This is seriously the best thing about it, as it doesn’t bloat or effect existing mark-up. Furthermore, if you do a lot of work for clients, once you’ve set up all your icons, you can keep all the animations set-up in the SVG, which makes it really easy and efficient. Simply use a html “<object>” with the source to your SVG and all the animation and styling is ready to go! I hope you’ve enjoyed this tutorial. <hr class="separator" /><h3>Additional Info</h3>Here are some useful SVG related links: <div class="bullet"><ul><li><a href="http://css-tricks.com/using-svg/">Using SVG</a> - A complete guide to using SVG by Chris Coyier.</li><li><a href="http://www.w3.org/TR/SVG/styling.html">Styling SVG</a> - W3C’s documentation for styling SVG.</li><li><a href="http://design.tutsplus.com/articles/making-icons-smarter--webdesign-15586">Making Web Icons Smarter</a> - Tuts+ article on Iconic’s “smart icons”</li><li><a href="http://design.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694">Manipulating SVG Icons With Simple CSS </a>- Tuts+ article on style Iconic’s SVG implementation.</li><li><a href="http://tutsplus.github.io/Styling-Iconic/styling/index.html#modal-kickstarter">Light Up Your Icons</a> - An example of what’s possible with SVG.</li><li><a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/getting-started-with-scalable-vector-graphics-svg/">Getting Started With Scalable Vector Graphics (SVG)</a> - Tuts+ intro to using SVG.</li><li><a href="http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/">Animated Svg Icons With Snap.Svg </a>- Article & Demo on SVG animations from Codrops.</li><li><a href="http://useiconic.com/">Iconic</a> - Advanced Icons for the Modern Web (still in development at the time of writing).</li><li><a href="https://github.com/filamentgroup/grunticon">Grunticon</a> - An SVG icon solution.</li><li><a href="https://github.com/somerandomdude/SVG-Injector">SVG Injector</a> - A Javascript based script for injecting SVG directly into HTML.</li><li><a href="https://github.com/jkphl/iconizr">Iconizr </a>- A PHP command line tool for converting SVG images to a set of CSS icons.</li></ul></div><hr class="separator" />What are your thoughts on animating SVG? Are you new to CSS keyframing? Let us know your thoughts in the comments below. </div></div>

Animate SVG Icons with CSS3 & jQuery

Recently, there’s been a lot of buzz throughout the web design and development community on using SVG for icons. Due to a number of limita...

+ Read more »

100+ Best Free jQuery CSS Image Hover Effect Demos & Plugins

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYyH6XSjrOOaAlgx59_mavbWQe_u0QynnXleQFRYxu1iETBEcWcLZrxNnEYh3VTnq3CmOPDB50Wq8SEVnMmfc41CKng_70jNcfIZvZDaUoa7r-41Dk9E6c0FtsjAPTRYIl6nXbAYyq9sh/s1600/100%252B-Best-Free-jQuery-CSS-Image-Hover-Effect-Demos-Plugins.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYyH6XSjrOOaAlgx59_mavbWQe_u0QynnXleQFRYxu1iETBEcWcLZrxNnEYh3VTnq3CmOPDB50Wq8SEVnMmfc41CKng_70jNcfIZvZDaUoa7r-41Dk9E6c0FtsjAPTRYIl6nXbAYyq9sh/s640/100%252B-Best-Free-jQuery-CSS-Image-Hover-Effect-Demos-Plugins.jpg" width="640" /></a></div>JQeury hover effects add a nice finishing touch to any website or project. With increasing support of jQuery on modern broswers, along with HTML5 and CSS3 integration, hover effects have become more powerful and easier to implement than ever. Whether you are using hover effects for images, text, buttons, there are a number of free solutions on the web. Today we have brought you this awesome collection of the best 100 free jQuery CSS image hover effects including both demos and plugins. We hope you find something useful here for your project. Enjoy. <a name="more"></a> <hr class="separator" /><h4>Expanding Overlay Effect</h4>A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/ExpandingOverlayEffect/" target="_blank">View Demo</a> <img alt="jQuery-Hover-Effect-Overlay" class="wp-image-8141 alignnone" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jQuery-Hover-Effect-Overlay.jpg" /> <hr class="separator" /><h4>3D Thumbnail Hover Effect</h4>A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/3DHoverEffects/" target="_blank">View Demo</a> <img alt="jQuery-Hover-Effect-3D_Image" class="alignnone wp-image-8146" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jQuery-Hover-Effect-3D_Image.jpg" /> <hr class="separator" /><h4>Scrolable thumbs Menu</h4>In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item. <a class="btn sunset small" href="http://tympanus.net/codrops/2010/05/10/scrollable-thumbs-menu/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/ScrollingThumbs/" target="_blank">View Demo</a> <img alt="jQuery-Hover-Effect-3D_Image_menu" class="alignnone wp-image-8149" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jQuery-Hover-Effect-3D_Image_menu.jpg" /> <hr class="separator" /><h4>Hover Slide Effect</h4>Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. <a class="btn sunset small" href="http://tympanus.net/codrops/2010/11/16/hover-slide-effect/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/HoverSlideEffect/" target="_blank">View Demo</a> <img alt="jQuery-Hover-Effect-Image_Slide" class="alignnone wp-image-8150" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jQuery-Hover-Effect-Image_Slide.jpg" /> <hr class="separator" /><h4>Bubbleirif Jquery Image Gallery</h4>In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse. <a class="btn sunset small" href="http://tympanus.net/codrops/2010/12/10/bubbleriffic-image-gallery/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/BubblerifficImageGallery/" target="_blank">View Demo</a> <img alt="jQuery-Hover-Effect-Image_Gallery" class="alignnone wp-image-8152" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jQuery-Hover-Effect-Image_Gallery.jpg" /> <hr class="separator" /><h4>Sweet Thumbnail Image Gallery</h4>In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/SweetThumbnails/" target="_blank">View Demo</a> <img alt="SweetThumbnailsPreviewGallery" class="alignnone wp-image-8153" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/SweetThumbnailsPreviewGallery.jpg" /> <hr class="separator" /><h4>Hover/Click Trigger For Circular Elements With Jquery</h4>Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/TipsTricks/HoverClickTriggerCircle/" target="_blank">View Demo</a> <img alt="HoverClickTriggerCircles" class="alignnone wp-image-8154" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/HoverClickTriggerCircles.jpg" /> <hr class="separator" /><h4>Direction-Aware Hover Effect With Css3 And Jquery</h4>How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/" target="_blank">View Demo</a> <img alt="DirectionAwareHover" class="alignnone wp-image-8155" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/DirectionAwareHover.jpg" /> <hr class="separator" /><h4>Circle Hover Effects With Css Transitions</h4>A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/CircleHoverEffects/" target="_blank">View Demo</a> <img alt="CircleHoverEffects" class="alignnone wp-image-8156" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/CircleHoverEffects.jpg" /> <hr class="separator" /><div><h4>Caption Hover Effects</h4>A tutorial on how to create some subtle and modern caption hover effects. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/06/18/caption-hover-effects/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/CaptionHoverEffects/" target="_blank">View Demo</a> <img alt="CaptionHoverEffect" class="alignnone wp-image-8157" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/CaptionHoverEffect.jpg" /></div><hr class="separator" /><h4>3d Shading With Box-Shadows</h4>A tutorial about a technique that uses box shadows for creating a realistic shading effect on simple objects. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/08/27/3d-shading-with-box-shadows/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/3DShadingWithBoxShadows/" target="_blank">View Demo</a> <img alt="3DShadingWithBoxShadows" class="alignnone wp-image-8158" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/3DShadingWithBoxShadows.jpg" /> <hr class="separator" /><h4>Creative Link Effects</h4>An inspirational collection of experimental link effects mostly using transitions on pseudo-elements. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/08/06/creative-link-effects/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-1" target="_blank">View Demo</a> <img alt="jQuery-Hover-Effect-text-links" class="alignnone wp-image-8159" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jQuery-Hover-Effect-text-links.jpg" /> <hr class="separator" /><div><h4>Animated Books With Css 3d Transforms</h4>A creative way to show interactive books using CSS 3D Transforms. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/07/11/animated-books-with-css-3d-transforms/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/AnimatedBooks/index.html" target="_blank">View Demo</a></div><img alt="jQuery-Hover-Effect-Books-Hover" class="alignnone wp-image-8161" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jQuery-Hover-Effect-Books-Hover.jpg" /> <hr class="separator" /><h4>Responsive Icon Grid</h4>A responsive grid of anchors with icons, text and some example hover transitions. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/07/01/responsive-icon-grid/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Blueprints/ResponsiveIconGrid/" target="_blank">View Demo</a> <img alt="jQuery-Hover-Effect-Icon-Grid" class="alignnone wp-image-8162" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jQuery-Hover-Effect-Icon-Grid.jpg" /> <hr class="separator" /><div><h1>Simple Icon Hover Effects</h1>A set of simple round icon hover effects with CSS transitions and animations for your inspiration.</div><a class="btn sunset small" href="http://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/IconHoverEffects/" target="_blank">View Demo</a> <img alt="jQuery-Hover-Effect-Icon-Hover" class="alignnone wp-image-8163" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jQuery-Hover-Effect-Icon-Hover.jpg" /> <hr class="separator" /><h1>Pseudo-Elements Animations And Transitions</h1>Some creative experiments that use animations and transitions on pseudo-elements to create interesting effects. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/05/22/examples-of-pseudo-elements-animations-and-transitions/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/PseudoElementsAnimationsTransitions/index2.html" target="_blank">View Demo</a> <img alt="AnimatingTransitioningPseudoElements" class="alignnone wp-image-8164" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/AnimatingTransitioningPseudoElements.jpg" /> <hr class="separator" /><h4>Flipping Circle Slideshow</h4>A simple circular slideshow where we flip the image in order to navigate. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/01/28/flipping-circle-slideshow/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/CircleFlipSlideshow/" target="_blank">View Demo</a> <img alt="FlippingCircleSlideshow" class="alignnone wp-image-8165" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/FlippingCircleSlideshow.jpg" /> <hr class="separator" /><h4>Sticky Caption Concept</h4>A little trick on how to make captions of thumbnails or items “sticky” in order to stay visible in the window or viewport. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/12/13/sticky-captions-concept/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/StickyCaptionsConcept/" target="_blank">View Demo</a> <img alt="StickyCaptionsConcept" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/StickyCaptionsConcept.jpg" /> <hr class="separator" /><div><h4>Creative Web Typography Styles</h4></div>Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/TypographyStyles/" target="_blank">View Demo</a> <img alt="CreativeWebTypographyStyles" class="alignnone wp-image-8167" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/CreativeWebTypographyStyles.jpg" /> <hr class="separator" /><h3>Fast Hover Slideshow</h3>A little fast-running image slideshow that plays on hover and pauses when mousing out. The current image will stay visible. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/05/09/how-to-create-a-fast-hover-slideshow-with-css3/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/TipsTricks/FastHoverSlideshow/index.html" target="_blank">View Demo</a> <img alt="FastHoverslideshow" class="alignnone wp-image-8168" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/FastHoverslideshow.jpg" /> <hr class="separator" /><h4>Page Transitions With Css3</h4>In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/CSS3PageTransitions/index3.html#about" target="_blank">View Demo</a> <img alt="CSS3PageTransitions" class="alignnone wp-image-8171" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/CSS3PageTransitions.jpg" /> <hr class="separator" /><h4>Fullscreen Background Image Slideshow With Css3</h4>Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/" target="_blank">View Demo</a> <img alt="CSS3FullscreenSlideshow" class="alignnone wp-image-8172" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/CSS3FullscreenSlideshow.jpg" /> <hr class="separator" /><h4>Lateral On-Scroll Sliding With Jquery</h4>The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/LateralOnScrollSliding/" target="_blank">View Demo</a> <img alt="LateralOnScrollSliding" class="alignnone wp-image-8173" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/LateralOnScrollSliding.jpg" /> <hr class="separator" /><div><h4>Typography Effects With Css3 And Jquery</h4>Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/11/28/typography-effects-with-css3-and-jquery/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/TypographyEffects/index.html" target="_blank">View Demo</a> <img alt="TypographyEffects" class="alignnone wp-image-8174" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/TypographyEffects.jpg" /> <hr class="separator" /><div><h4>Interactive Typography Effects With Html5</h4></div></div>With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the iceberg that is interactive design. In this tutorial I will go over the development of dynamic, and generative banners to give your website that little extra wow! <a class="btn sunset small" href="http://tympanus.net/codrops/2011/11/09/interactive-html5-typography/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/InteractiveTypographyEffects/index.html" target="_blank">View Demo</a> <img alt="InteractiveTypographyEffects" class="alignnone wp-image-8175" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/InteractiveTypographyEffects.jpg" /> <hr class="separator" /><h4>Elastic Image Slideshow With Thumbnail Preview</h4>Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/ElasticSlideshow/" target="_blank">View Demo</a> <img alt="ElasticImageSlideshow" class="alignnone wp-image-8176" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/ElasticImageSlideshow.jpg" /> <hr class="separator" /><h4>Original Hover Effects With Css3</h4>The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/OriginalHoverEffects/" target="_blank">View Demo</a> <img alt="OriginalHoverEffects" class="alignnone wp-image-8178" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/OriginalHoverEffects.jpg" /> <hr class="separator" /><h3>Animated Buttons With Css3</h3>Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/AnimatedButtons/index.html" target="_blank">View Demo</a> <img alt="AnimatedButtons" class="alignnone wp-image-8179" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/AnimatedButtons.jpg" /> <hr class="separator" /><h4>Creative Css3 Animation Menus</h4>Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/" target="_blank">View Demo</a> <img alt="CreativeCSS3Menus" class="alignnone wp-image-8180" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/CreativeCSS3Menus.jpg" /> <hr class="separator" /><h4>Blur Menu With Css3 Transitions</h4>There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/BlurMenu/" target="_blank">View Demo</a> <img alt="BlurMenuwithCss3" class="alignnone wp-image-8181" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/BlurMenuwithCss3.jpg" /> <hr class="separator" /><h4>Animated Text And Icon Menu With Jquery</h4>Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/07/12/animated-text-and-icon-menu/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/AnimatedTextIconMenu/example1.html" target="_blank">View Demo</a> <img alt="AnimatedTextIconMenu" class="alignnone wp-image-8182" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/AnimatedTextIconMenu.jpg" /> <hr class="separator" /><div><h4>Rotating Image Slider With Jquery</h4>In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders.</div><a class="btn sunset small" href="http://tympanus.net/codrops/2011/04/28/rotating-image-slider/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/RotatingImageSlider/" target="_blank">View Demo</a> <img alt="RotatingImageSlider" class="alignnone wp-image-8183" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/RotatingImageSlider.jpg" /> <hr class="separator" /><h4>Creative Button Styles</h4>Some creative and modern button styles and effects for your inspiration. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/06/13/creative-button-styles/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/CreativeButtons/" target="_blank">View Demo</a> <img alt="CreativeButtons" class="alignnone wp-image-8184" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/CreativeButtons.jpg" /> <hr class="separator" /><h4>Thumbnail Proximity Effect With Jquery And Css3</h4>Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/ProximityEffect/" target="_blank">View Demo</a> <img alt="ProximityEffect" class="alignnone wp-image-8186" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/ProximityEffect.jpg" /> <hr class="separator" /><h4>Bounce Hover Effect</h4><a class="btn sunset small" href="http://codepen.io/anon/pen/wHGDz" target="_blank">More / Info</a> <img alt="bounce-hover-effect" class="alignnone wp-image-8188" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/bounce-hover-effect.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Hover Caption Effect</h4><a class="btn sunset small" href="http://codepen.io/hkfoster/details/ocBin" target="_blank">More / Info</a> <img alt="hover-caption-effect" class="alignnone wp-image-8190" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/hover-caption-effect.jpg" /> <hr class="separator" /><h4>Parralax Image Hover Effect</h4><a class="btn sunset small" href="http://codepen.io/akhbar/pen/raLqc" target="_blank">More / Info</a> <img alt="Parallax Hover example" class="alignnone wp-image-8191" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/Parallax-Hover-example.jpg" /> <hr class="separator" /><h4>Image Caption Hover Effect</h4><a class="btn sunset small" href="http://codepen.io/anon/pen/pGsHm" target="_blank">More / Info</a> <img alt="Caption-Image-Hover" class="alignnone wp-image-8192" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/Caption-Image-Hover.jpg" /> <hr class="separator" /><h4>Direction Aware Hover Effect</h4><a class="btn sunset small" href="http://codepen.io/anon/pen/scEBn" target="_blank">More / Info</a> <img alt="direction-aware-hover" class="alignnone wp-image-8194" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/direction-aware-hover.jpg" /> <hr class="separator" /><h4>HTML CSS Caption Image Hover Effect</h4><a class="btn sunset small" href="http://codepen.io/anon/pen/yrqbl" target="_blank">More / Info</a> <img alt="Caption-Image-Hover-reveal" class="alignnone wp-image-8195" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/Caption-Image-Hover-reveal.jpg" /> <hr class="separator" /><h4>Simple Image Hover/Flip Effect</h4><a class="btn sunset small" href="http://codepen.io/yoannhel/pen/bhCjn" target="_blank">More / Info</a> <img alt="Image-Flip-Hover" class="alignnone wp-image-8196" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/Image-Flip-Hover.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Diagonal Image Caption Hover Effect</h4><a class="btn sunset small" href="http://codepen.io/anon/pen/lexzK" target="_blank">More / Info</a> <img alt="image-hover-caption" class="alignnone wp-image-8197" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/image-hover-caption.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Diagonal Image Slide Transition</h4><a class="btn sunset small" href="http://codepen.io/anon/pen/duzag" target="_blank">More / Info</a> <img alt="diagonal-transition" class="alignnone wp-image-8198" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/diagonal-transition.jpg" /> <hr class="separator" /><h4>Stylish Image Hover Effects jQuery Plugin</h4>Adipoli is a simple jQuery plugin used to bring stylish image hover effects. There are over 20 transition effects (popout, sliceDown, sliceUp, fold, boxRain, boxRainGrow and etc…) you can choose from. You can also select the start effects, like transparent, normal, overlay and grayscale. <a class="btn sunset small" href="http://cube3x.com/adipoli-jquery-image-hover-plugin/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://cube3x.com/demo/adipoli-jquery-image-hover-plugin/" target="_blank">View Demo</a> <img alt="jquery-image-hover-plugin" class="alignnone wp-image-8199" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jquery-image-hover-plugin.jpg" /> <hr class="separator" /><h4>Awesome jQuery image Swish Zoom Hover Effect</h4><a class="btn sunset small" href="http://www.htmldrive.net/items/show/1133/Awesome-jQuery-image-Swish-Zoom-Hover-Effect?ModPagespeed=noscript" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.htmldrive.net/items/demo/1133/Awesome-jQuery-image-Swish-Zoom-Hover-Effect" target="_blank">View Demo</a> <img alt="swoosh-hover-effect" class="alignnone wp-image-8204" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/swoosh-hover-effect.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Hover Zoom Effect with jQuery and CSS</h4>The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails. As always, you can check out a demo or grab the source right here if you don’t want to read the entire tutorial. <a class="btn sunset small" href="http://mattbango.com/notebook/code/hover-zoom-effect-with-jquery-and-css/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://mattbango.com/demos/hover-zoom/" target="_blank">View Demo</a> <img alt="hover-zoom-image-hover" class="alignnone wp-image-8200" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/hover-zoom-image-hover.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Sliding Boxes and Captions with jQuery</h4><a class="btn sunset small" href="http://buildinternet.com/project/mosaic/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://buildinternet.com/project/mosaic/1.0/" target="_blank">View Demo</a> <img alt="mosiac-sliding-boxes" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/mosiac-sliding-boxes.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Interactive Zoom On Hover jQuery Plugin</h4><a class="btn sunset small" href="http://www.jacklmoore.com/zoom/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.jacklmoore.com/zoom/" target="_blank">View Demo</a> <img alt="zoom-on-hover-jquery" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/zoom-on-hover-jquery.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Beautiful Image Hover Effects With Jquery/Css3</h4>Today we are glad to show you two beautiful image hover effects with jquery and CSS3. This example1 we want to show you, jquery hover effect using animation opacity transform color and the example2 you will see classic effect using zoom overlay using jquery and css. <a class="btn sunset small" href="http://www.freshdesignweb.com/beautiful-image-hover-effects-with-jquery-css3.html" target="_blank">More / Info</a> <a class="btn sunset small" href="http://freshdesignweb.com/demo/2012/09/beautiful-mage-hover-effects-jquery-css3/example1/" target="_blank">View Demo</a> <img alt="image-hover-effects-jquery-css3" class="alignnone wp-image-8206" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/image-hover-effects-jquery-css3.jpg" /> <hr class="separator" /><h4>Tilt-Shift Hover jQuery Hover Effect</h4>jQuery and CSS3 image filters to replicate the tilt-shift effect. <a class="btn sunset small" href="http://www.htmldrive.net/items/show/1382/-jQuery-and-CSS3-image-replicate-effect" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.htmldrive.net/items/demo/1382/-jQuery-and-CSS3-image-replicate-effect" target="_blank">View Demo</a> <img alt="tilt-shift-hover" class="alignnone wp-image-8207" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/tilt-shift-hover.jpg" /> <hr class="separator" /><h4>Adaptive Thumbnail Pile Effect With Automatic Grouping</h4>An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/11/21/adaptive-thumbnail-pile-effect-with-automatic-grouping/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/Stapel/" target="_blank">View Demo</a> <img alt="ThumbnailPileEffect" class="alignnone wp-image-8209" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/ThumbnailPileEffect.jpg" /> <hr class="separator" /><h4>Koola Zoom jQuery Plugin</h4>This plugin makes images in an unordered list to zoom in on mouse hover and displays relative information. <a class="btn sunset small" href="http://www.nikolakis.net/2010/05/koalazoom-jquery-plugin-v1-0/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.nikolakis.net/koalazoom/demo-06.html" target="_blank">View Demo</a> <img alt="kooa-zoom" class="alignnone wp-image-8211" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/kooa-zoom.jpg" /> <hr class="separator" /><h4>Image black and white switch with jQuery</h4>This plug-in can easily convert any colored image into a B&W greyscale image. It uses the the HTML5 canvas tag and a fallback for the old browsers <a class="btn sunset small" href="http://www.htmldrive.net/items/show/1266/Image-black-and-white-switch-with-jQuery?ModPagespeed=noscript" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.htmldrive.net/items/demo/1266/Image-black-and-white-switch-with-jQuery" target="_blank">View Demo</a> <img alt="jquery-hover-black-white" class="alignnone wp-image-8214" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jquery-hover-black-white.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>jQuery Beautiful Responsive Portfolio Hover Gallery</h4>Create a beautiful responsive portfolio gallery with jquery mouse hover effect. On mouse over each images you see animation background transparency and two permalinks will appear with beauty icons link. <a class="btn sunset small" href="http://www.htmldrive.net/items/show/1258/jquery-beautiful-responsive-portfolio-hover-gallery" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.htmldrive.net/items/demo/1258/jquery-beautiful-responsive-portfolio-hover-gallery" target="_blank">View Demo</a> <img alt="jquery-hover-caption-effect" class="alignnone wp-image-8215" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jquery-hover-caption-effect.jpg" /> <hr class="separator" /><h4>Pure CSS3 images Hover Effects</h4>There are five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops. In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects. <a class="btn sunset small" href="http://www.htmldrive.net/items/show/1216/Pure-CSS3-images-Hover-Effects" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.htmldrive.net/items/demo/1216/Pure-CSS3-images-Hover-Effects" target="_blank">View Demo</a> <img alt="css-hover-effects" class="alignnone wp-image-8216" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/css-hover-effects.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>jQuery Multiple Image Hover Effect</h4><a class="btn sunset small" href="http://www.htmldrive.net/items/show/1168/jQuery-multiple-Image-Hover-effect" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.htmldrive.net/items/demo/1168/jQuery-multiple-Image-Hover-effect" target="_blank">View Demo</a> <img alt="multiple-jquery-hover-effects" class="alignnone wp-image-8217" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/multiple-jquery-hover-effects.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Cool jQuery Images Filters Effects</h4>Filters is a jQuery plugin that allows to filter items using custom animation. You can use CSS3 transitions or just fadeIn/Out effect. Go to the demos and see how simple is that. <a class="btn sunset small" href="http://www.htmldrive.net/items/show/1155/Cool-jQuery-images-Filters-effect" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.htmldrive.net/items/demo/1155/Cool-jQuery-images-Filters-effect" target="_blank">View Demo</a> <img alt="jquery-filter-effects" class="alignnone wp-image-8218" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jquery-filter-effects.jpg" /> <hr class="separator" /><h4>CSS Powered Buttons with Hover Tooltips</h4><a class="btn sunset small" href="http://www.techandall.com/css-powered-buttons-with-hover-tooltips/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.techandall.com/demos/CSS_tooltip_hover_buttons/" target="_blank">View Demo</a> <img alt="free-social-hover" class="alignnone wp-image-8219" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/free-social-hover.jpg" /> <hr class="separator" /><h4>BookBlock – Flip-Book Plugin</h4>The content flip plugin BookBlock has been updated and improved. Content can be flipped vertically and horizontally, and we’ve added support for RTL among other things. <a class="btn sunset small" href="http://tympanus.net/codrops/2013/05/28/bookblock-revised/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/BookBlock/" target="_blank">View Demo</a> <img alt="BookBlockRevised" class="alignnone wp-image-8222" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/BookBlockRevised.jpg" /> <hr class="separator" /><h4>Css3 Hover Effect Tutorial With Image Circle</h4>In tutorial we will show you new CSS3 hover effects using image circle animation transform to enhance your web design interface . It looks so much more interesting with creative design using circles image transition style. <a class="btn sunset small" href="http://www.freshdesignweb.com/css3-hover-effect-tutorial-with-image-circle.html" target="_blank">More / Info</a> <a class="btn sunset small" href="http://freshdesignweb.com/demo/2013/08/css3-hover-effect-circle-image/" target="_blank">View Demo</a> <img alt="rollover-image-effect" class="alignnone wp-image-8223" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/rollover-image-effect.jpg" /> <hr class="separator" /><h4>Css3 Hover Effects With Websymbols Tutorial</h4>In tutorial we are going to show you new CSS hover effects using CSS transition properties with websymbols. It looks so much more interesting with creative design using circles transition style. <a class="btn sunset small" href="http://www.freshdesignweb.com/css3-hover-effects-with-websymbols-tutorial.html" target="_blank">More / Info</a> <a class="btn sunset small" href="http://freshdesignweb.com/demo/2012/09/css3-hover-effects-tutorial/" target="_blank">View Demo</a> <img alt="css3-hover-effects-tutorial" class="alignnone wp-image-8224" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/css3-hover-effects-tutorial.jpg" /> <hr class="separator" /><h4>Grid Navigation Effects With Jquery</h4>Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/06/09/grid-navigation-effects/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/GridNavigationEffects/example5.html/" target="_blank">View Demo</a> <img alt="GridNavigationEffects" class="alignnone wp-image-8225" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/GridNavigationEffects.jpg" /> <hr class="separator" /><h4 id="title">Flat Folio</h4>A simple flat portfolio style that doesn’t suck. Saw a similar style on a theme and had to re-create it. Added some animate.css by Dan Eden and a hover effect. <a class="btn sunset small" href="http://cssdeck.com/labs/flat-portfolio/" target="_blank">More / Info</a> <img alt="Flat Folio" class="alignnone wp-image-8226" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/Flat-Folio.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>CSS Directional Image Hover Effect</h4><a class="btn sunset small" href="http://codepen.io/BJack/pen/mEjzG" target="_blank">More / Info</a> <img alt="hover-kittens" class="alignnone wp-image-8227" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/hover-kittens.jpg" /> <hr class="separator" /><h4 id="title">Iconic Buttons – Hover Effect</h4><a class="btn sunset small" href="http://cssdeck.com/labs/iconic-buttons" target="_blank">More / Info</a> <img alt="Iconic Buttons-hover" class="alignnone wp-image-8228" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/Iconic-Buttons-hover.jpg" /> <hr class="separator" /><h4>Sliding Boxes and Captions with jQuery</h4>Add an extra layer of information to your images with sliding boxes. <a class="btn sunset small" href="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://s3.amazonaws.com/buildinternet/live-tutorials/sliding-boxes/index.htm/" target="_blank">View Demo</a> <img alt="slidingbig" class="alignnone wp-image-8229" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/slidingbig.jpg" /> <hr class="separator" /><h4>Beautiful Thumbnail Hover Effect</h4>Thumbnails of photos is very common part of any website. We have seen a lot of innovation and beautiful representation of thumbnails. Recently I came across a beautiful hover effect on thumbnails. Without saying much first see what is this effect. <a class="btn sunset small" href="http://www.nitinh.com/2009/10/beautiful-thumbnail-hover-effect-using-mootools/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.nitinh.com/static/Thumbnails/index.html" target="_blank">View Demo</a> <img alt="Beautiful Thumbnail Effect" class="alignnone wp-image-8231" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/Beautiful-Thumbnail-Effect.jpg" /> <hr class="separator" /><h4>Beautiful Thumbnail Hover Effect With Caption</h4>Some days back I wrote a post regarding “Beautiful Thumbnail Hover Effect“. On getting such a good response about the javascript effect I am again presenting a different thumbnail presentation. <a class="btn sunset small" href="http://www.nitinh.com/2009/11/another-beautiful-thumbnail-hover-effect-using-mootools/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.nitinh.com/static/another_thumb/index.html" target="_blank">View Demo</a> <img alt="hover-caption-effect-jquery-2" class="alignnone wp-image-8232" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/hover-caption-effect-jquery-2.jpg" /> <hr class="separator" /><h4>jQuery Thumbnail with Zooming Image and Fading Caption</h4><a class="btn sunset small" href="http://www.queness.com/post/590/jquery-thumbnail-with-zooming-image-and-fading-caption-tutorial" target="_blank">More / Info</a> <a class="btn sunset small" href="http://www.queness.com/resources/html/zoomthumbnail/index.html" target="_blank">View Demo</a> <img alt="small-hover-caption-effect" class="alignnone wp-image-8233" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/small-hover-caption-effect.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Blox Hover – jQuery Image Hover Plugin</h4>BloxHover is a simple jQuery plugin that animates overlay on images in 10 different effects. You can put any HTML content in the overlay. It’s structure is simple and it’s very flexible. The minified version of the plugin is 10kb. <a class="btn sunset small" href="http://dejans.net/bloxhover/documentation.html" target="_blank">More / Info</a> <a class="btn sunset small" href="http://dejans.net/bloxhover/index.html" target="_blank">View Demo</a> <img alt="blox-hover-plugin" class="alignnone wp-image-8235" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/blox-hover-plugin.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>12 Free jQuery Hover Effects</h4><a class="btn sunset small" href="http://3.s3.envato.com/files/54173789/index.html#" target="_blank">More / Info</a> <img alt="12-free-hover-effects" class="alignnone wp-image-8236" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/12-free-hover-effects.jpg" /> <hr class="separator" /><h4>12 Awesome jQuery Hover Effects</h4><a class="btn sunset small" href="http://3.s3.envato.com/files/49350481/index.html" target="_blank">More / Info</a> <img alt="free-jquery-hover-plugin" class="alignnone wp-image-8237" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/free-jquery-hover-plugin.jpg" /> <hr class="separator" /><h4 id="title">Responsive List + Flip effect</h4>Hover or Click each element to see flip and bounceInLeft Effects. <a class="btn sunset small" href="http://cssdeck.com/labs/rxcleo5w" target="_blank">More / Info</a> <img alt="responsive-flip-effect" class="alignnone wp-image-8239" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/responsive-flip-effect.jpg" /> <hr class="separator" /><h4 id="details-title">Flat Responsive Sliding Boxes</h4><a class="btn sunset small" href="http://codepen.io/rexkirby/details/yjxso" target="_blank">More / Info</a> <img alt="flat-slide-down-effect" class="alignnone wp-image-8240" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/flat-slide-down-effect.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4 id="details-title">Gallery hover expand</h4><a class="btn sunset small" href="http://codepen.io/furfoxsnakes/details/zwluC" target="_blank">More / Info</a> <img alt="Gallery hover expand" class="alignnone wp-image-8241" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/Gallery-hover-expand.jpg" /> <hr class="separator" /><h4>Fade-ing/out Magnifying Glass Overlay Hover</h4>A common method for setting up a quick image gallery on a website is to have small thumnbnail images which when clicked on pop open larger versions of the image (using a script like Fancybox). It’s a good idea to have some sort of effect on the smaller thumbnail images when they are hovered over to make it more user friendly (in the same way you might change the color of a text link when hovered over). <a class="btn sunset small" href="http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://webdesignandsuch.com/posts/jquery-image-rollover/" target="_blank">View Demo</a> <img alt="jquery-mouse-over" class="alignnone wp-image-8243" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jquery-mouse-over.jpg" /> <hr class="separator" /><h4>Magnifying glass for image zoom using Jquery and CSS3</h4>Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action. <a class="btn sunset small" href="http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3" target="_blank">More / Info</a> <a class="btn sunset small" href="http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3" target="_blank">View Demo</a> <img alt="magnifying glass hover" class="alignnone wp-image-8244" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/magnifying-glass-hover.jpg" style="border: 1px solid black;" /> <hr class="separator" /> <h4>Hover Captions (HCaptions) jQuery Plugin</h4>Hover Captions (here in after: HCaptions) is a jQuery plugin that enables you to display caption overlays with cool effects over images, div’s, ect.. <a class="btn sunset small" href="https://github.com/ryun/HCaptions" target="_blank">More / Info</a> <a class="btn sunset small" href="http://ryun.github.io/HCaptions/" target="_blank">View Demo</a> <img alt="hover-captions" class="alignnone wp-image-8245" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/hover-captions.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Hover Black & White jQuery Plugin</h4>This plug-in can easily convert any colored image (in an html page) into a B&W greyscale image. <a class="btn sunset small" href="https://github.com/GianlucaGuarini/jQuery.BlackAndWhite" target="_blank">More / Info</a> <a class="btn sunset small" href="http://gianlucaguarini.github.io/jQuery.BlackAndWhite/" target="_blank">View Demo</a> <img alt="hover-black-white" class="alignnone wp-image-8246" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/hover-black-white.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>Windy – Image Preview Plugin</h4>This jQuery plugin can be used to swiftly navigate content items. The effect will make the items fly away like a deck of cards caught in a tiny storm. <a class="btn sunset small" href="http://tympanus.net/codrops/2012/10/09/windy-a-plugin-for-swift-content-navigation/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/Windy/" target="_blank">View Demo</a> <img alt="Windy-jquery-plugin" class="alignnone wp-image-8247" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/Windy-jquery-plugin.jpg" /> <hr class="separator" /><h4>Draggable Image Boxes Grid</h4>Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area. <a class="btn sunset small" href="http://tympanus.net/codrops/2011/10/07/draggable-image-boxes-grid/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Tutorials/DraggableImageBoxesGrid/" target="_blank">View Demo</a> <img alt="DraggableImageBoxesGrid" class="alignnone wp-image-8248" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/DraggableImageBoxesGrid.jpg" /> <hr class="separator" /><h4> Merging Image Boxes With Jquery</h4>Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter […] <a class="btn sunset small" href="http://tympanus.net/codrops/2010/11/30/merging-image-boxes/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://tympanus.net/Development/MergingImageBoxes/" target="_blank">View Demo</a> <img alt="mergingImageBoxes" class="alignnone wp-image-8250" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/mergingImageBoxes.jpg" /> <hr class="separator" /><h4>Simple Image Hover Effects with jQuery</h4><a class="btn sunset small" href="http://dailydesignnotes.com/tutorials/how-to-make-image-hover-effects-with-jquery/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://dailydesignnotes.com/demos/image-hover-effect/#" target="_blank">View Demo</a> <img alt="simple-jquery-image-hover-effect" class="alignnone wp-image-8251" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/simple-jquery-image-hover-effect.jpg" style="border: 1px solid black;" /> <hr class="separator" /><h4>jQuery image slide on hover effect</h4><a class="btn sunset small" href="http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect/" target="_blank">More / Info</a> <a class="btn sunset small" href="http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm" target="_blank">View Demo</a> <img alt="jquery-image-slide-effect" class="alignnone wp-image-8252" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/10/jquery-image-slide-effect.jpg" style="border: 1px solid black;" /></div>

100+ Best Free jQuery CSS Image Hover Effect Demos & Plugins

JQeury hover effects add a nice finishing touch to any website or project. With increasing support of jQuery on modern broswers, along wit...

+ Read more »