Efecto de opacidad en las imágenes

Uno de los trucos que más me gusta es éste que da un efecto de opacidad (desvanecimiento) a las imágenes que tenemos en el blog. Además de ser sencillo de implementar, hace que nuestro blog luzca elegante.

 

Puedes ver el truco en funcionamiento en este blog de pruebas. 

 

Para darle ese efecto de opacidad a las imágenes de las entradas del blog, solo pega antes de </head> el siguiente código para las imagines seleccionadas:

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

Esto para las imágenes que pongas dentro de tu sidebar en un gadget. Además, tendrás que agregar de forma manual la clase 'blImagjtef'  dentro del código o url de las imágenes, de modo que quede así:

<img class='blImagjtef' src='url-imagen'/>

Pero si quieres que todas las imágenes que pongas en las entradas tengan este efecto, sin tener que recurrir a este proceso manual, además de tedioso, en ese caso deberás poner este otro código:

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

Con esto, todas las imágenes de tu blog quedarán con ese efecto de opacidad que le da cierto aire de profesionalismo, ¿no crees?