Efecto opaco en tus fotos al pasar el ratón sobre ellas

Un truco muy chulo que seguro te "engancha" y por ende lo añadirás en un montón de tus fotos !!. Te muestro un ejemplo... para verlo no tienes más que pasar el ratón sobre la imagen que te muestro a continuación.



Puedes ver también este truco aplicado en mi página DIYs, así te doy otra idea de dónde puedes aplicar este truco !


Te explico el proceso, he subido mi foto clicando en el botón de la parte superior del post "inserta imagen", una vez hecho esto, me he ido a al pestaña "HTML" dónde he buscado y localizado el código de la foto en cuestión, en este caso sería :
<a href="http://4.bp.blogspot.com/-WTxN0LMFjLY/VPFf-8MFwcI/AAAAAAAAShA/RuZS9s9aFGI/s600/Efecto-opacidad-fotos.jpg" imageanchor="1" ><img border="0" src="http://4.bp.blogspot.com/-WTxN0LMFjLY/VPFf-8MFwcI/AAAAAAAAShA/RuZS9s9aFGI/s600/Efecto-opacidad-fotos.jpg" height="500" width="600" /></a>
¿ Por qué se que es ese el fragmento de código perteneciente a la foto ? muy sencillo, no hay más que fijarse en lo que viene a continuación de src ( que no es más que la url de la foto ), observarás que al final de dicha url viene el nombre que le hayas dado a la foto en cuestión.
Bien, una vez hecho esto no hay más que sustituir el fragmento de código HTML que ya hemos localizado por el siguiente :
<a href="http://4.bp.blogspot.com/-WTxN0LMFjLY/VPFf-8MFwcI/AAAAAAAAShA/RuZS9s9aFGI/s600/Efecto-opacidad-fotos.jpg" target="_blank"><img border="0" height="500" onmouseout="this.style.opacity=1;this.filters.alpha.opacity="70";" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity="50";" src=" http://4.bp.blogspot.com/-WTxN0LMFjLY/VPFf-8MFwcI/AAAAAAAAShA/RuZS9s9aFGI/s600/Efecto-opacidad-fotos.jpg" width="600" /></a>
Muy importante : si copias y pegar que no se te olvide sustitutir el href y el src por el href y el src de tu foto. Y por supuesto, el height (alto de la foto ) y width ( ancho de la foto ) sino es el deseado, del cual ya hablamos en este otro post.
Otra cosa, puedes modificar la intensidad de la opacidad, para ello deberás de modificar el valor que viene a continuación de this.style.opacity=, es decir el 0.5, teniendo en cuenta que cuanto más pequeño sea este valor más opaca se volverá la foto al pasar el ratón sobre ella, y lógicamente cuanto mayor sea éste valor al contrario, es decir menos opaca se volverá la foto al pasar el ratón sobre ella.
¿ Qué te ha parecido el truco de hoy ?, ¿ ya lo habías probado ?,...Quizá también te interese :
Consejos de blogger a blogger
Personalizar el tamaño de las fotos en blogger
Cómo mejorar la estructura de tus posts

Fuente: este post proviene de Café largo de ideas, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

niños código html tutoriales

Yo soy bastante maniática con el tema de las fotos en el blog, no me gusta que salgan pequeñas, sino prácticamente al tamaño del post, es decir ocupando todo el ancho del mismo... y hoy quiero compartir contigo cómo lo hago !! Bien, en mi caso concreto publico las fotos a un ancho fijo de 600 píxeles, y esa medida no la da por defecto Blogger con ninguna de las opciones que tiene habilitadas al ...

niños blogueradas

Ahí va mi composición con fotos de diversos detalles de Port Aventura : Ahora las explicaciones pertinentes... que pueden parecer un poco liosas pero que seguro le "pillas el tranquillo" rápido, es sólo cuestión de fijarse bien !! Bien, lo primero que debes hacer es subir cada imagen a modo individual, como vienes haciendo habitualmente (en la pestaña de "redactar")... Yo te ...