Question

I’d like to add an animated text overlay on an a>img with some simple effect like fade or animate in/out.

Does anyone know of a plugin that already does this, or can suggest the mootools functions I should be looking at?

Answer 1

You’ll need to translate the following pseudocode into Mootools: –

1. Write a function which creates a new <div> element inside a given element, using the new Element() function. The content of the <div> will be passed through in the function arguments in addition to the parent element.
2. Add a mouseenter event to the <a> tag you want to work on which triggers the above function and passes itself as the parent element. You could set the rel attribute of the parent <a> tag to be the content of the child <div> to make this plugin really dynamic.
3. Create a slideOut() function which takes an element, finds the dimensions of the parent element and carries out a slide animation to move the element outside the parent elements bounds. Make sure you have overflow:hidden; set on the parent elements CSS.
4. Add a mouseout event to the <a> tag which runs the slideOut() function and passes the child <div> as it’s argument.

That should do it.