Ya son varios los que me habéis preguntado como se hace que las imágenes cambien de color al pasar el ratón sobre ellas. Ya lo explique anteriormente en esta entrada, pero quiero profundizar un poco mas para que quede claro el concepto usado, una vez entendido es muy fácil de implementar.

Todo se basa en la imagen



Realizamos una imagen como la que os muestro arriba y haciendo unos ajustes en nuestra hoja de estilos haremos que solo se vea una parte y al pasar el ratón sobre ella se vera solo la otra.



En nuestro CSS creamos una clase en la cual pondremos de background la imagen

.ejemplo { background: url(Url de la imagen) no-repeat ; }

Si nuestra imagen tiene unas dimensiones de 100 pixeles de alto por 50 pixeles de ancho, añadiremos el ancho y la mitad del alto

.ejemplo {
background: url(Url de la imagen) no-repeat ;
width: 50px;
height: 50px; }

Con esto mostramos solo la mitad superior de la imagen, ahora añadimos que al pasar el ratón sobre ella muestre solo la parte escondida

.ejemplo:hover {
background: url(Url de la imagen) 0px -50px no-repeat ; }

Ya solo nos quedara añadir un elemento HTML a nuestra plantilla

<div class="ejemplo"/>

Si queremos poner un enlace colocaríamos

<div class="ejemplo"><a href="URL DONDE QUERAMOS QUE VAYAN PULSANDO LA IMAGEN"></a></div>


Espero que así se os haya quedado claro el concepto de lo que hacemos, es una sola imagen en la cual solo mostramos una parte y al pasar el ratón sobre ella mostramos la otra.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también