How to make your Images shake on hover | DragDropr's Help Center

With DragDropr Builder you can easily add animations in your Images. A bit of coding knowledge is required.

Please follow the steps below to add a Shaking hover effect in images.

Drop an image widget and select your desired picture:

2. Get the image widget id. You can easily get the widget id by just selecting the widget and check right toolbar for the id:

Insert the following code with your widget Id in Page Additional CSS:

#your-widget-id img:hover {

animation: shake 0.5s;

animation-iteration-count: infinite;

}

@keyframes shake {

0% { transform: translate(1px, 1px) rotate(0deg); }

10% { transform: translate(-1px, -2px) rotate(-1deg); }

20% { transform: translate(-3px, 0px) rotate(1deg); }

30% { transform: translate(3px, 2px) rotate(0deg); }

40% { transform: translate(1px, -1px) rotate(1deg); }

50% { transform: translate(-1px, 2px) rotate(-1deg); }

60% { transform: translate(-3px, 1px) rotate(0deg); }

70% { transform: translate(3px, 1px) rotate(-1deg); }

80% { transform: translate(-1px, -1px) rotate(1deg); }

90% { transform: translate(1px, 2px) rotate(0deg); }

100% { transform: translate(1px, -2px) rotate(-1deg); }

}

Note: In the above code please add your Widget Id after # symbol. P.S. You can find all widgets classes here.

In my case its ddr-fe6dcdef7e so, for me it looks like this:

#ddr-fe6dcdef7e img:hover {