El efecto Hover consiste en la alteracion del aspecto de un elemento (bien sea una imagen o un enlace) cuando se situa el cursor sobre el mismo. Hay multitud de posibilidades de 'hovers', tal como ya os he explicado en otros posts. Este concretamente del que os hablo hoy, emula como el brillo de un cristal cuando pasamos el raton por una imagen. Esto se consigue con CSS3 y con una imagen png como fondo, y que da este elegante y magnifico resultado.
Pasa el cursor del raton por estas imagenes para ver el resultado:
 |  |
 |  |
Para poner este efecto en nuestro blog o web, primero añadimos el codigo CSS3 en la plantilla. En el caso de Blogger, lo ponemos antes de ]]></b:skin>.
.imagen_brillo{ width: 200px;height: 200px;margin: 30px auto;position: relative; border: 2px solid #666;} .hover_brillo{width:100%; height: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCFwDU5yuxLVr_I8x_Eg-3mCXB3BfTZxOLuI-QTbpSqUQ6lh8-eMtQpX0UN2D5QdU9okRymOwQ7qIj3fi4zQboqQ6HPTvC10sPImjRw249IVAN7ROgt-SsWU7vS0AqlwhJdFUzoop_7nQ/s1600/Hover+brillo.png);position: absolute;background-position: -265px 0; left:0px; top:0px; background-repeat:no-repeat; -webkit-transition: background-position .3s ease; -moz-transition: background-position .3s ease; -o-transition: background-position .3s ease; transition: background-position .3s ease;} .hover_brillo:hover{ background-position: 10px 0;} |
Una vez hecho esto, cada vez que queramos poner una imagen de este tipo, añadimos el siguiente codigo. Sustituimos donde pone IMAGEN (en rojo) por la url de la que queramos.
<div class="imagen_brillo"><img src="IMAGEN" height="200" width="200" /><div class="hover_brillo" style="text-align: right;"></div></div> |
