Der Drew,
Apologies for the delayed reply.
Thanks for using the Animate It!
The feature you are looking for is not Sup[ported by Animate It!
However, it is really easy to achieve.
Just do the following:
1. Open you Post/Page and go to text view (
screenshot)
Paste the following HTML:
<div class="hover-wrapper">
<div class="hover-image" style="background-image: url(http://animateitdemo.wpdevcloud.com/wp-content/uploads/2016/04/for.png)">
<img src="http://animateitdemo.wpdevcloud.com/wp-content/uploads/2016/04/demo.png">
</div>
</div>
Now, you can change these images to suit your needs:
- for.png would be the default image showing
- demo.png would be the image that appears on hover
Also, you can repeat the <div class="hover-image"... </div> to multiple sections like these.
2. Go to Settings > Animate It! > Custom CSS box and paste the following:
.hover-wrapper{
text-align: center;
}
.hover-image{
display: inline-block;
margin: 5px;
background-repeat: no-repeat;
background-position: center top;
}
.hover-image img{
opacity: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.hover-image:hover img{
opacity: 1;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
A working demo of this effect here:
animateitdemo.wpdevcloud.com/demo-for-drew/
Please let me know if this works for you.
