Efecto de desvanecer las imagnes de nuestro blog al pasar el cursor.

Ya comentamos en un post anterior, como podemos aumentar nuestras imagenes al pasar el cursor.

Pero hoy os vamos a mostrar algo parecido pero en vez de agrandar nuestras imagenes la acción que le vamos a dar es que se aclaren, y así realizar la función de desvanecerse, al pasar el cursor por encima de ellas.
Para ello vamos a modificar partes de nuestra plantilla, y como siempre recomiendo antes de hacer nada, es mejor hacer una copia de seguridad de nuestra plantilla HTML por si algo no nos sale bien.
Podéis ver como se hace paso a paso en este otro post.
Ahora ya tenemos nuestra plantilla guardada en un sitio seguro nos vamos a:
Tema > Editar HTML 
Con los botones de Ctrl+F buscamos </head>
y justo encima pegamos el código que queramos incluir.

Efecto aparecer todas las imagenes de nuestro 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>

Efecto aparecer las imagenes seleccionadas de nuestro blog.

 <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>

Efecto desvanecer todas las imagenes de nuestro 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>

Efecto desvanecer las imagenes seleccionadas de nuestro blog.

    <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>

Para la imagenes que nosaotros queramos elegir, al publicarlas en nuestra entrada en la edicion HTML, tenemos que poner estos codigos para que funcione.

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

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

En donde dice URL DE LA IMAGEN incluiremos la dirección de la fotografía o imagen.

Y ya podemos disfrutar es este increíble efecto.