Mostrar otra imagen al paso del mouse.

Podemos lograr que al pasar el ratón sobre las palabras os aparece otra imagen. Este efecto no es nada difícil de lograr y se realiza solo con CSS.

Este efecto solo se hace con una imagen, arriba tendremos la imagen que se muestra habitualmente y abajo la que se verá al pasar el ratón por ella.

Subimos la imagen a nuestra web de alojamiento, editamos nuestra plantilla HTML y antes de ]]></b:skin> pegamos

#efecto a:link, #efecto a:visited {
margin: 0px 0px 20px 0px;
display: block;
height: 190px;
background: transparent url('URL DE LA IMAGEN') 0px 0px no-repeat;
padding: 8px 0 0 10px;
text-decoration: none;
}
#efecto a:hover {
background: transparent url('URL DE LA IMAGEN') 0px -200px no-repeat;
padding: 8px 0 0 30px;
}

Dos detalles a tener en cuenta, mi imagen tiene unas dimensiones de 246 pixeles de ancho por 390 pixeles de alto. En heigth (190px) definimos el alto que tendrá nuestra imagen a mostrar, aproximadamente será la mitad del alto de nuestra imagen. Es decir ahí indicamos el alto de la imagen a mostrar.

En el primer background (0px 0px) definimos la posición de la imagen sin el efecto y en el segundo background (0px -200px) definimos la posición de la imagen al pasar el mouse. Es decir le indicamos la segunda imagen por lo que el valor de -200px variara según el tamaño de nuestra imagen.

Para usar el truco nos vamos a añadir un elemento de pagina HTML y pegamos

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

Autor: Carlos Pizcos . 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

+ Diseño-web