So I was going through this post on David Walsh's blog, about horizontal and vertical flip effects in CSS3 and thought it'd make for a nice addition to this library. I can take this over the coming weekend.

Let me know what you think!

Am I missing something?

The hover.css version includes the webkit/moz calls, though the scss version doesn't? Is there a scss version I can't see?

It would be so useful to use includes on elements rather than adding a class in my markup.

The file scss/hover.scss contains a class specific for your site, e.g.:

.button {
    @include button();
}

Please, move this to the html file or an other Sass file, because this inclusion makes it more difficult to integrate Hover into my own project.

I've been playing with the project, great work so far.

Overriding the built in options is really painful as I have to have a second sheet that I've written out just to override all of the options within the framework.

Example:

.icon-float-away(){
  ... some stuff ...
  &:before,
  &:after {
    content: "\f055";
    position: absolute;
    right: 1em;

It would be great if you moved these options to a variables.less file (which is common in LESS projects) so they could be overridden. The update would look something like:

.icon-float-away(){
  ... some stuff ...
  &:before,
  &:after {
    content: @hvr-icon-float-away;
    position: absolute;
    right: @hvr-icon-right-position;

That way in a single file I just change:

@hvr-icon-right-position: 1em;

to

@hvr-icon-right-position: 2em; (or whatever value)

without a lot of work.

I have my own web font, and it would be really awesome if I can just throw these classes on to my existing icons and have the effects added to it.

How do I use it with PHP ? I did everything as mentioned in the tutorial, but it doesn't work.

It would be nice to namespace the CSS classes to make hover not interfere with existing libraries/code.

Something like hover-grow ?

Using hvr-grow class with button tag or also , the text inside the element will massively blur on scaling if the element is fixed positioned (Safari OS X 10.10.2).

I put a hover effect on the nav menu on my site and it works in Chrome & FF but not in IE. Just in case it makes a difference, I also have a CSS animation effect on another element, plus a jQuery animation effect which is on the same element as the CSS one, but it's a different element to the one the hover effect is on.

I tried adding the -ms- prefix to all the transform and animation attributes to all the lines of the hover CSS, so now they all have the basic transform or animation attribute as well as the webkit prefix and the -ms-prefix. I even tried putting them in the correct order (not that it matters) but it's not going.

Are there any known issues that could be causing this?

In safari 5.1.7 the bubble effects dont work - and it makes all the text on the page a weird color/weird anti-alias/ unreadable.

I'm not sure why these basic ones weren't included but here's some code to add to the collection:

/* Forward */
.hvr-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}

/* Backward */
.hvr-backward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active {
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
}

The button moves correctly, but it doesn't render the radial shadow below it.

It is necessary, there needs to be an option built within. Many people would find this useful, as this is the best looking CSS i've seen.

I want the header logo on my website http://DefeatDisease.com to be Constant (hover-shadow)

Thank You

I am using the "ripple out" effect for some links. The links are set to open in a new window/tab. What is happening is that after someone clicks the link, a new tab is opened, but if you go back to the original page, the animation no longer plays for the link you just clicked on, until you refresh the page.

How can I fix that, so that the animation always plays?

How can I trigger hover effect on document ready? Does it possible?

Having a slight issue with hvr-border-fade as it doesn't seem to be on top of the image even tho Im using z-index 1;

you can see a faint blue shadow round the box but its not on top of the image, any ideas ?

Hi beautiful script! Thank you!

I'm using fontAwesome icons on my site + I'm using hover.css.

Now if you navigate to my website: www.jedanaest.com.hr and scroll all the way down to the footer area, you will see a contact widget with super cool icons that are animated on hover.

The only problem I have is that I want the icon to be first i.e. on the left, and then text.

Is this something I need to do with CSS or is it a HTML problem? The problem does not persist if I use a non-icon animation, but the bot text and icon animate.

Thanks!

Hi,
Thanks for wonderful helper. So, I realize that LESS support has not been provided yet. Is it on the roadmap? Otherwise, I would like to start LESS support for Hover.

I'm using bootstrap 3 and your nice background transitions like bounce-to-right.

However no matter what I try I cannot get simple hover (bg color change) working in IE8. In IE8 the button is rendered in non-hover state with the darker hover color I've set up.

Has anyone had similar issue and found a work around?

Hi,
In my website, with wordpress, the css display in Safari
-webkit-transform: translateY(5px);

display in Chrome
-webkit-transform: translateY(-5px);

http://www.xavier-artot.com

Thanks

I what a demo...plezz.

When I add the class "hvr-underline-reveal" to a link the font-weight changes.
Any idea how to resolve this?

Can these be used in some way with touch devices (iPad, etc.)?

Hi,
i'm trying to include Hover into my bower.json, but after running bower install i got error message "No tag found that was able to satisfy 1.0.8".

Currently i'm using latest commit id in my bower.json as workaround, but this makes difficult to check is there any newer version and how much has changed since latest release;

Is it possible to add release tags with versions?

ps: I used VersionEye to lookup version numbers for this package;

Hey! I created a flat shadow pop out effect that I think would be a nice addition to your library. You can check out my code here :http://jsfiddle.net/Lumz96ex/5/ . I'm new to Github and decided to explore CSS related repositories since CSS and HTML are my strong suit. Let me know what you think.

May I translate the documentation?

Does exist a place to put these translations?

My button looks weird. The css is:

.login-btn{
margin: .4em;
padding: 1em;
cursor: pointer;
background: #e1e1e1;
text-decoration: none;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

Hello, I have a question about this element, more precise about aligning. I have a series of elements who are forming a circle in mine div, this is the example http://dabblet.com/gist/3864650.
I want to use grow hover on all buttons, and I have done all the tutorial said, been using hover-min.css, but when I use it, the property align all icons in the middle, I have tried and put 'vertical-align:none' but that did not do the trick.
How can I over come this.
Tank you.

i think your css work here is great. but i've found (what i think, is hover specific) issue http://acornfencingandconcrete.co.uk/ makes fair use of your hover.css BUT in the top right i have three buttons that are NOT responding in firefox.

im assuming this is an issue on the actual hover action as there is also a hover "email us" button on the carousel that is unresponsive too.

excuse the carousel location, currently fixing [renders off screen (right)]

Hi, how couId I apply hover effects when it's clicked some div has some class hover.css, I tried copy the css rules and added the pseudo class :active but it didn't work, Thanks

Since Opera v20 and Chrome v33, elements that have both a transition and animation applied may snap into place when hovered over.

Unfortunately this is a browser bug and nothing can be done about it in the Hover.css library. A transition will not take affect when an animation is applied as well.

Bug reported here: https://code.google.com/p/chromium/issues/detail?id=347993&thanks=347993&ts=1393600890

Example of the issue here: http://codepen.io/IanLunn/pen/noxIf

Hopefully this will be fixed in a not too distant version of Chrome

I think that to make a CSS generator, where you can select only the desired animation would be a good idea. Often, you need only a few animations of the entire list, and pull out all the CSS for this is somehow not good.

I could help you in this.

Hi there,

Great project, love it!!

I was wondering, can we somehow apply the styles to an submit - input field ?

(I know it will work using but, is there a way to use it with the input field?)

I'm using the hover.css effects with bootstrap just like this:

`

.hover tag properties:
.hover-shadow { display: inline-block; position: relative; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0,0,0,0); }

and the display property breaks making the tag shrink.
Is there any way to adjust display properties, so that and hover styling work together without breaking .

Is there an easy way to include just the mixins? When I include the hover.scss from bower, it also includes the generated classes for the hover-effect.

Firefox 26.0 Windows
On your demo page the following effects exhibit extreme "jitters":
*Bubble Float Left/Right/Top/Bottom
*Outline Inward

How to reproduce: on any of the speech bubble ones just move the cursor to roughly where the :before arrow and the box slide apart, what will happen is that the animation will happen, and the cursor will change from the hand back to arrow, animation will start to slide back in and get re-triggered non stop making the animation stutter and the cursor flip between arrow/hand non stop until you move away. With Outline Inward, if the cursor is roughly where the outline first appears when the animation starts, same idea

I've tested with Firefox 26.0, Chrome 32.0.1700.76 m and IE11, and Firefox is the only one where it can get "caught" in the animation

Nice collection of effects overall!

On hovering the 'Bounce In' button I noticed that the text goes down and up at the end of the animation.

What can be the cause?

Firefox - 40.0.2
OSX Yosemite - 10.10.4

Hi, great plugin, thanks for all the work.

I have a problem when using images from other domains, such as:

I apply a hover effect to that, follow the link which opens in a new window, but the only problem is that the 'Built with Grunt' icon carries on with the hover effect until I click somewhere else on the page.

It only happens to images/icons pulled from other domains, not ones on my domain.

Can you suggest some Javascript to eliminate this behaviour please, or point me in the right direction for being a moron.

Thank you.

For the Border effects, Something I have dealt with but is an issue..

When you have a hvr-outline-in for example on an image/link and your on say bootstrap and scale down or on mobile you get a little horizontal scroll because of the CSS this adds in.

Hi,
I have a project with less and Bootstrap.
How replace Sass by Less.

Thanks

PS: I never used Sass

While your intent was to create hover effects, it only takes a bit more work to make this work for all users. Currently, this provides no feedback for someone using a keyboard to move throughout the page.
Here are the two steps needed to make this keyboard accessible.

1. place an href on your examples. A link without an href is an anchor and does not receive keyboard focus. So simply add href="#" to your examples. This will also re-enforce best practices.
2. add :focus to your styles. This is super easy with SASS. a:hover, a:focus. You could also add :active to make it work with older versions of IE.
   These are small changes, but will greatly increase the accessibility of projects for people that copy/paste your code.
   thank you for putting together these examples.

Think it would be great if the keyframes directives are included in the mixins.

@mixin pulse {
  @at-root {
    @include keyframes( #{$nameSpace}-pulse ) {
      // ...
    }
  }

 @include hacks();

  // ...
}

For individual usage a _hover.scss partial would be nice to prevent Copy&Paste actions.

This would be nice!

I think a few demos or examples in the README would be a real benefit. I saw the project in the github daily digest and wanted to check it out, but don't have time for a sample implementation right at the moment.

In description is written that it is possible to use hover.css with SVG graphics. How can I do that?

It would be nice to add the names of all contributors to the README.

Would that be a possibility?

Button in the "Background Transitions" section are getting stuck in the hovered state unless you click in empty space:
I'm not sure this is a purposeful feature. However I'd like to know how to remove this?

I have been working on a small web-site and played around with the “Bubble” effect. I wanted to validate it so I used the validator from W3. Basically, what I found is that the pointer-event declaration is unnecessary. And whenever you use calc(% - px) there is an invalid value alert. It works just as fine with only just a value in pixel. So if validation matters to you, this is what I found thus far. I'll make sure to credit you later on my webpage. Thank you.