Facebook Twitter Pinterest Instagram Efecto opaco en tus fotos al pasar el ratón sobre ellas | Café largo de ideas - Decoración, Lifestyle, DIY

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjK2VwtffblmESyutAIGFZyEg3WXvoCrwazrUquoZd4rQ4p4rwbavh2pPhLxUV3-T8RNEPVqYRI_nqENk3fkkm9T0z0i_qjlMwAdvfA7CiSKzlQUaqMwFWzRA5-AJB361MWNaCVnFMEXR2/s1600/Efecto-opacidad-fotos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjK2VwtffblmESyutAIGFZyEg3WXvoCrwazrUquoZd4rQ4p4rwbavh2pPhLxUV3-T8RNEPVqYRI_nqENk3fkkm9T0z0i_qjlMwAdvfA7CiSKzlQUaqMwFWzRA5-AJB361MWNaCVnFMEXR2/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjK2VwtffblmESyutAIGFZyEg3WXvoCrwazrUquoZd4rQ4p4rwbavh2pPhLxUV3-T8RNEPVqYRI_nqENk3fkkm9T0z0i_qjlMwAdvfA7CiSKzlQUaqMwFWzRA5-AJB361MWNaCVnFMEXR2/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjK2VwtffblmESyutAIGFZyEg3WXvoCrwazrUquoZd4rQ4p4rwbavh2pPhLxUV3-T8RNEPVqYRI_nqENk3fkkm9T0z0i_qjlMwAdvfA7CiSKzlQUaqMwFWzRA5-AJB361MWNaCVnFMEXR2/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.

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 ?,...

¡Muchas gracias por compartir el post!

Sobre la autora

¡Muchas gracias por tu visita!, si te ha gustado el post no te olvides de comentarlo ni de compartirlo en tus redes sociales ; )

0 comentarios:

Publicar un comentario

Follow my blog with Bloglovin