Efectos imágenes para las entradas de nuestro blog

Hoy mostramos diferentes efectos en las imágenes de las entradas de nuestro blog cuando pasamos el ratón por encima.

Para el efecto aparecer al pasar el cursor en todas las imágenes del blog:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

<script type='text/javascript'>

$(document).ready(function() {

$('img').fadeTo('slow', 0.5);

$('img').hover(function() {

$(this).fadeTo('slow', 1.0);

}, function() {

$(this).fadeTo('slow', 0.5);

});

});

</script>

cc

Para el efecto desvanecer al pasar el cursor en todas las imágenes del blog:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

<script type='text/javascript'>

$(document).ready(function() {

$('img').fadeTo('slow', 1.0);

$('img').hover(function() {

$(this).fadeTo('slow', 0.5);

}, function() {

$(this).fadeTo('slow', 1.0);

});

});

</script>

Para el efecto aparecer al pasar el cursor en las imágenes escogidas:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

<script type='text/javascript'>

$(document).ready(function() {

$('.blImagjtef').fadeTo('slow', 0.5);

$('.blImagjtef').hover(function() {

$(this).fadeTo('slow', 1.0);

}, function() {

$(this).fadeTo('slow', 0.5);

});

});

</script>

eeeeeeeeeeeeee

Para el efecto desvanecer al pasar el cursor en las imágenes escogidas:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

<script type='text/javascript'>

$(document).ready(function() {

$('.blImaggjtef').fadeTo('slow', 1.0);

$('.blImaggjtef').hover(function() {

$(this).fadeTo('slow', 0.5);

}, function() {

$(this).fadeTo('slow', 1.0);

});

});

</script>

Los dos últimos efectos se realizaran solo a las imágenes que hemos seleccionado

Para ello tenemos que aplicar este código en la entrada de nuestro blog, con el link de la imagen seleccionada

Efecto aparecer

<img class='blImagjtef' src='URL DE LA IMAGEN'/>

Efecto desvanecer

<img class='blImaggjtef' src='URL DE LA IMAGEN'/>

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso