CODEWITHSUNDEEP
htmlcss
Code
Code

Reputation: 2129

On Hover Effect Not Working

I am trying to implement a vertical wobble effect on my anchor tag, an example can be found here:

http://ianlunn.github.io/Hover/

I have this is my mark up:

.hvr-wobble-vertical {
        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;
    }

<div class="col-lg-2 col-md-4 col-sm-6">
            <div class="pin">
                <a href="#" class="hvr-wobble-vertical">
                    <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png"/></a>
                <p style="text-align: center;">
                    some clever text.
                </p>
            </div>
</div>

I am currently getting no result... Can someone give me some pointers of what I may be missing?

Upvotes: 0

Views: 81

Answers (1)

Joseph
Joseph

Reputation: 1086

You're missing the animation keyframes :)

.hvr-wobble-vertical {
  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;
}
.hvr-wobble-vertical:hover,
.hvr-wobble-vertical:focus,
.hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Vertical */

@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
<div class="col-lg-2 col-md-4 col-sm-6">
  <div class="pin">
    <a href="#" class="hvr-wobble-vertical">
      <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
    </a>
    <p style="text-align: center;">
      some clever text.
    </p>
  </div>
</div>

http://ianlunn.github.io/Hover/

https://github.com/IanLunn/Hover/blob/master/css/hover.css

Upvotes: 1

Related Questions