I am trying to figure out how to animate a div when I click on another div. I want the animated div to not only move, but also push other elements around it instead of just covering them up. Currently, my div animates on top of images below it, but I want it to interact with and push those images. Any suggestions on how to achieve this would be greatly appreciated.
Here is the link to my fiddle: Fiddle Link
In my fiddle, there is an image of a horse. How can I make the animated div push this image down as it animates?
Another challenge I am facing is triggering the animation of the green div when clicking on the blue div below it. I have tried different methods without success so far. Any tips or guidance on how to accomplish this would be helpful.
HTML
<div class="Invisible"> </div>
<img src="http://lorempixel.com/output/animals-q-c-1244-480-10.jpg" class="this"/>
<div class="thing"></div>CSS
.Invisible {
z-index:2;
position:absolute;
top:0;
left:0%;
background-color:green;
height:20%;
width:100%;
}
.Invisible:hover {
z-index:2;
position:absolute;
top:0;
left:0;
background-color:green;
height:20%;
width:100%;
-webkit-animation: Rooms 1s; /* Chrome, Safari, Opera */
animation: Rooms 1s;
}
@-webkit-keyframes Rooms {
from {height:20%; }
to {height:60%; }
}
@keyframes Rooms {
from {height:20%; }
to {height:60%;}
}
.this {
position:absolute;
top:20%;
left:0;
width:100%;
height:50%;
}
.thing {
background-color:blue;
position:absolute;
top:80%;
left:20px;
height:20px;
width:20px;
}