Hello everyone, I hope you guys are having an amazing day.
So I was fixing a landing page and ran to a CSS problem:
There are 2 images on the website that both have a "shaking" effect when the users click on them.
Here is the example of the code:
<img src="image1.png" class="shake-vertical" style="position:absolute; left:0; bottom:0; ">
<img src="image2.png" class="shake-vertical" style="position:absolute; right:0; bottom:0;" >
The problem I am facing is that the landing page only makes sense if both of them shake at the same time.
My question for all the CSS experts is:
Is there anyway to kinda link those 2 images together so when I click on 1 image, the other would "know" and the shaking effect will take place at the same time?
Thank you!
Hey!
Not an expert, but until they show up I have a suggestion. Try putting both of these img tags within one <div> with a class of shake vertical or whatever you'd like. Hope it helps!
Hey, personally I prefer to do animations with selectors in jQuery, because I think it gives more control than CSS3 animations.
I made two JS fiddles to show you a possible setup
With Jquery: https://jsfiddle.net/298Lcbcr/4/
With CSS3 Animations: here they are wrapped in a div, so you can see how the hover is actually applied to the outer div - This is less flexible imo
http://jsfiddle.net/mm3b1bj6/1/