Welcome, Guest
Username: Password: Remember me

TOPIC: Fade in superimposed images?

Fade in superimposed images? 4 years 8 months ago #1122

Perhaps the answer should be obvious, but before I jump into Animate, this is what I want to do at the moment:

I have an inline image over which I want to successively fade in superimposed png images (rasterized text on otherwise transparent frames, actually) then have the combined image scale and otherwise behave like a single image. I might try other transitions, but just fading in would be fine for now.

So is that something I can do with Animate?
The administrator has disabled public write access.

Fade in superimposed images? 4 years 8 months ago #1123

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

Fade in superimposed images? 4 years 8 months ago #1124

Heavens, thank you for this. I was already coming to terms with just writing up some HTML and css, but it's extremely helpful to have such a complete structure for this.

I'll send a link when I have this up on my site.

Many thanks,
Drew
The administrator has disabled public write access.

Fade in superimposed images? 4 years 8 months ago #1125

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Drew,

Glad to know it worked.
Please feel free to let me know if you face any other issues.
The administrator has disabled public write access.
Time to create page: 0.115 seconds

Need Customization? Feel free to...

Contact Us

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