Shake image on hover with css? - html

Question

I am trying to make image shake on hover with CSS3 but seems like I have syntax error. I am trying the apply the effect to css3.png and html5.png
I have added id classes to the images that I would like to have that effect.
Here is my current html:
<div class="row">
<div class="col-lg-2 col-lg-offset-2">
<div id="img">
<img class="img-responsive shake" src="img/html5.png">
</div>
</div>
<div class="col-lg-3">
<img class="img-responsive" src="img/and.png">
</div>
<div class="col-lg-2">
<div id="img">
<img class="img-responsive shake" src="img/css3.png">
</div>
</div>
</div>
here is the CSS:
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
#-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
#keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}

Answer 1

To get the effect on hover, you have to include the :hover selector in your css: http://www.w3schools.com/cssref/sel_hover.asp
.shake img:hover {
***code***
}

Answer 2

Try replacing
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
with this CSS.
.shake:hover {
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}

Answer 3

Your problem is that .shake is calling a div that you are not using in your HTML. First, take the spaces out of your div classes, it is bad naming convention... Then call those divs instead of ".shake" It would be closer to this
# .img-responsive-shake{
enter code here
}