TOPIC: Fade one image into another.

great plugin. Thanks a lot.

I want to fade one image into another on a timer.
So image one displays on entry to site, then after say 3 seconds image 2 fades in instead.
Is this possible using your plugin?

Thanks for your help .

Dear Ben,

Yes this can be done by adding a little css to the 2 image DIVs so that they overlap on each other (setting position absolute or fixed based on your requirement)

An example of how the overlapping should look like can be seen here:
http://jsfiddle.net/skandie/h0kk4tvo/

Please note that I have also added the animation classes on the DIVs. But since the plugin is not loaded on the fiddle page, you would not be able to see fade-in animations there.

Just copying and pasting the html and css should work for you. Then change the css to set height and width of the images and DIVs accordingly.

Let me know if this works for you.
Please don't forget to rate the Animate-it Plugin.

Thanks for your help. This makes sense however I am doing this into wordpress and I don't have access to the CSS. Is there a workaround for this?


"edit" sorry I can edit the style.css and editor.css however so far the two images don't display properly on the page. They come up two different sizes and overlayed on a different part of the page.

What I amp attempting to do, is I have two imaged identical apart from one feature, so I am hoping when they fade into each other it appears as if the one feature has appeared.


Thanks again.


Sorry I am an idiot. The code works brilliantly (just me that doesn't)

However all images on the site now display at 100% with due to this part of the css I think.
How can I make this apply to only these two images.

Thankyou.

Glad to know it worked

I should have pointed this out earlier.
In order to apply 100% images width only to the 2 DIVS. Please change the CSS:
to
Please don't forget to rate the plugin: https://wordpress.org/plugins/animate-it/