Hover Effect Not Functioning Properly

I am attempting to create a vertical wobble effect on my anchor tag, inspired by an example found at the following link:

This is the code I have implemented:

.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>

Despite implementing this code, I am not seeing the desired result. Can anyone provide me with guidance on what I might be overlooking?

htmlcss

Answer №1

Don't forget to include the animation keyframes for this effect :)

.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 Animation Keyframes */

@-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>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which is more accessible: a disabled textbox or a div with role="textbox"?

Imagine I have a form in which one of the fields (name) is always disabled. When it comes to accessibility, would it be more effective to use an input <label> Name <input role="textbox" aria-readonly="true" value="Joe Shmoe" /> < ...

htmlaccessibilitywai-aria

Displaying HTML content via Java Proxy Servlet

I have been using the code snippet below public class ProxyServlet extends HttpServlet { private static final long serialVersionUID = 1L; private final String USER_AGENT = "Mozilla/5.0"; public ProxyServlet() { super(); } ...

javahtmlservlets

issue with mobile devices not properly supporting position: fixed

I'm currently working on a responsive website and have encountered an issue with the topbar. When the website switches to mobile layout, the topbar scrolls down a bit before sticking to the top of the screen as intended. This causes misalignment in th ...

htmlcss

The form submits immediately after jquery is activated

One challenge I'm facing involves multiple forms on a single page being submitted using jQuery. Currently, I have the following code snippet: $("form").submit(function (e) { // Submit form via Ajax }); The problem arises when the form is only s ...

jqueryhtmlajax

The Mat-Card inside the Mat-Table fails to expand to its full width when using overflow-x property

When I inserted a mat-card in a mat-table and set the width to 100%, I noticed that when scrolling with overflow-x from left to right, the whole wrapper was not completely filled with the mat-card. Can anyone suggest CSS optimizations for this issue? Here ...

cssangularangular-materialmat-table

Tips for adjusting the height of an iframe to ensure that all content is responsive and contained within a div set to 40% height

I am having issues with setting the height of an iframe that displays a PowerBI dashboard. My specific requirements are: The content within the iframe should be contained within a div that has a height of 40% and sets all its contents to a height of 100% ...

javascripthtmlcssbootstrap-4powerbi-embedded

Accessing office documents such as XLS and PPT files directly within the browser window using Internet Explorer 7.0

Currently using XP, IE 7.0, Office 2010, and operating within a company INTRAnet environment. I have created a HomePage in Word and saved it as HTML, including links to other Office files. Despite my attempts, I am unable to get these office files to ope ...

htmlinternet-explorerms-office

The Jquery instructions were not executed

Enjoy your day! I have recently downloaded the latest compressed version of jQuery from a lesson site here (Download the compressed, production jQuery 3.6.0) After that, in my HTML document, I included it like this: <head> <meta charset = &qu ...

javascripthtmljquery

Icon for sorting table columns depending on the browser

Once again, I'm facing a css problem with IE8 that is leaving me puzzled. I have a sortable table that is functioning perfectly fine. Within this table, there is a direction icon that serves as a background for the header column that is sorted, changi ...

jquerycssinternet-explorer

Overlaying Div Concealed by Background Video Filter

Whenever we add a filter to our background video, the div overlay ends up moving behind the video and becoming hidden. To see an example of this issue, check out this fiddle showcasing the background video with the text overlay: https://jsfiddle.net/dyrepk ...

cssfilterwebkithtml5-video

Attempting to retrieve the current time using JavaSscript

const currentTime = new Date(); const hours = now.getHours(); Console.log(hours); This block of code is returning an error message... Uncaught ReferenceError: now is not defined Please note that this snippet is written in JavaScript. I attempted to us ...

javascripthtmlnode.jsjsondynamics-al

A problem with centering a popup window using the CSS transform() function

Discovered a clever technique for creating a centered popup window in an application ( http://www.w3.org/Style/Examples/007/center ). Neat and simple code implementation ( http://jsfiddle.net/babaca/6rwL0v0c/22/ ). html <div class="__holder"> & ...

htmlcsscss-positiontransformbem

Utilizing background images in CSS to enhance bootstrap icons

Here is the HTML code snippet I'm working with: <a class="iconContainer" href="#"> <span class="containerIcon chevron-right"/> Test </a> And this is the corresponding CSS code: .chevron-right::befor ...

csstwitter-bootstrapbootstrap-4bootstrap-icons

Error TS2307: Module './tables.module.css' or its type declarations could not be located

Currently utilizing CSS modules within a create-react-app project and encountering an error within Google Chrome browser: https://i.stack.imgur.com/0ItNM.png However, the error appears to be related to eslint because I am able to close the warning modal i ...

cssreactjsreact-css-modules

Issue with positioning of menu items

I need help creating a header menu. You can view the code I've been working on here: http://jsfiddle.net/kc2cc/ . My goal is to have the clicked menu item (logo, places, events or groups) move down 1px when clicked, and return to its original positio ...

htmlcsspositioning

Create a div element that can be expanded on smaller devices

Is it possible to expand a div while hovering on a small or x-small device? I want to achieve something like this: https://i.sstatic.net/doJKa.png Currently, I can only hide the yellow div when the page is displayed on a small device. I am looking for a ...

javascriptcssresponsive-designbootstrap-4

Ways to align a nested list vertically

There are two nested lists: <ul> <li>First item <ul> <li> <a href="#">some item</a> </li> <li> <a href="#">some item</a> <</li& ...

css

Defaulting summernote to display in italics

Looking for a way to italicize a series of summernote inputs by default? I have removed all toolbar options except the italics button. Here's the HTML generating these inputs: <div style="width:250px;"> < ...

javascriptcssasp.net-mvcsummernote

"When trying to access a jQuery ID, it is coming back as undefined even though the

I'm attempting to obtain the ID of a specific element, save it as a variable, and then utilize that ID value to interact with other elements in the same section bearing the identical ID. <div class="mainContent"> <div class="articleContent"& ...

javascriptjqueryhtml

Expanding Your Django Template Abilities

Dealing with a fairly simple issue here. I've got a web page template that includes some common CSS styles at the top. <html> {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"> .... *n ...

pythonhtmlcssdjango