/* ANUNCIO4 */

Efecto Opaco al pasar el cursor en Imagenes con Javascript

Hoy te compartire un código que da efecto opaco a las imagenes, puedes ver un ejemplo aquí, este efecto le da un toque de elegancia al blog que quizá te guste para tu blog!

Comencemos, para agregar este efecto pega lo siguiente, despues de ]]></b:skin> (Recuerda que se busca en Diseño-> Edición de HTML).
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.8); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.latest_img&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.latest_img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.8); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
Guardar los cambios.
Ahora cada vez que pases el cursor sobre una imagen se opacará.

2 comentarios:

y para conseguir que una imagen, después de aplicar eso, no se opaque? es decir, evitar el efecto en una imagen determinada porque queramos aplicarle otro.

Un saludo

Publicar un comentario