Welcome, Guest
Username: Password: Remember me

TOPIC: Fade one image into another.

Fade one image into another. 7 years 5 months ago #103

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 .
The administrator has disabled public write access.

Fade one image into another. 7 years 5 months ago #104

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
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.
Last Edit: 6 years 6 months ago by eLEOPARD.
The administrator has disabled public write access.

Fade one image into another. 7 years 5 months ago #106

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.
Last Edit: 7 years 5 months ago by Ben Bastin.
The administrator has disabled public write access.

Fade one image into another. 7 years 5 months ago #107

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
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:
img{
    width: 100%;
    height: auto;
}
to
.image-first img, .image-second img{
    width: 100%;
    height: auto;
}

Please don't forget to rate the plugin: https://wordpress.org/plugins/animate-it/
Last Edit: 7 years 5 months ago by eLEOPARD.
The administrator has disabled public write access.
Time to create page: 0.122 seconds

Need Customization? Feel free to...

Contact Us

If you like these extensions, help us buy Yoga Mats :)