Revista En Femenino

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

Por Arántzazu Quiroga Alonso
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.
Efecto opaco en tus fotos al pasar el ratón sobre ellas
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/s1600/Efecto-opacidad-fotos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-WTxN0LMFjLY/VPFf-8MFwcI/AAAAAAAAShA/RuZS9s9aFGI/s1600/Efecto-opacidad-fotos.jpg" height="500" width="600" /></a>
¿ Por qué se que es ese el fragmento de código HTML 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/s1600/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/s1600/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

Volver a la Portada de Logo Paperblog