Effetto hover sulle miniature

[Astro86]

Descrizione
Script basato su MooTools che aggiunge un particolare effetto animato quando si passa con il mouse sulla miniatura di un'immagine.
(per vedere l'effetto andare QUI! <--Sito esterno)
Prima di tutto scaricare questo archivio e inserire nella root del forum:

Effetto over.rar

Attenzione: il css e settato per inserire la miniuatura all'interdo di un testo, quindi la miniatura se è presente un qualsiasi testo, si posizionerà a sinistra, mentre il testo a destra.

poi iserite il BBcode..

BBcode:

Codice: Seleziona tutto

[hoverimg={URL}]{TEXT}[/hoverimg]

Trasforma in HTML

Codice: Seleziona tutto

<script type="text/javascript" src="js/mootools-yui-compressed.js"></script>
	<link rel="stylesheet" href="css/1.css" />
<div class="container">

<div class='thumb'>
	<div class='someContent'>
		<div class='content'>{TEXT}</div>
		<div class='more'><a href="{URL}" target="_blank">Vedi &raquo;</a></div>
	</div>
	<div class='divLeft' style='left:0px'>
		<div class='divLeftImage' style='background:url({URL});'></div>
		<div class='divLeftShadow'></div>
	</div>
	<div class='divRight' style='left:0px;background-image:url({URL});'></div>
	<img class="thumbnail-shadow" alt="bottom" src="images/thumbnail-shadow.png"/>
</div>


<script type="text/javascript">
window.addEvent('domready',function(){
$$('div.thumb').each(function(div){

	div.getElement('div.someContent').set('tween', {duration:'700'});
	div.getElement('div.divLeft').set('tween', {duration: '450'});
	div.getElement('div.divRight').set('tween', {duration: '450'});
	
	div.addEvent('mouseenter',function(e){
		this.getElement('div.divLeft').tween('left','-70px')
		this.getElement('div.divRight').tween('left','80px')
		this.getElement('div.someContent').tween("background-position", "-20px 0px");
	})
	div.addEvent('mouseleave',function(e){
		this.getElement('div.divLeft').tween('left','0px')
		this.getElement('div.divRight').tween('left','0px')
		this.getElement('div.someContent').tween("background-position", "0px -167px");

	})
})
})
</script>

Aiuto in linea

Codice: Seleziona tutto

[hoverimg=URL Immagine]Testo[/hoverimg] - Passandoci sopra l'immagine si apre e fa visualizzare il testo.