1. Sólo con HTML.
Vamos a hacer que aparezca un texto sobre una imagen al pasar el ratón. Para ello sobre la imagen original ponemos un texto y subimos las dos de la siguiente manera:
<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>Tendremos que cambiar lo que está en rojo por la URL de la imagen inicial, y lo que está en verde por la URL de la imagen que aparecerá al pasar el mouse
Trata que las dos imágenes tengan el mismo tamaño para conseguir un mejor resultado. Si fuera necesario, incluye modificaciones en las dimensiones de la imagen. Por ejemplo:
<img height="320" width="177" src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>
El resultado final sería algo así:
2. Definiendo una clase en CSS.
La construcción del HTML es la habitual de una imagen con enlace y el truco en esta parte sólo consiste en insertar dentro de dicho enlace, una segunda imagen entre etiquetas span. Con las etiquetas span lo que conseguimos es poder independizar cada par de imágenes dentro de cada enlace. La segunda aparecerá solapada sobre la primera, pero sólo se verá cuando hagamos hover.
Para incluir sólo una imagen que cambia, en el post se tendría que incluir:
<div class="presentar">
<a href="#">
<img alt="" src="IMAGEN_1a" />
<span>
<img alt="" src="IMAGEN_1b" />
</span>
</a>
</div>
Si queremos incluir más imágenes, para cada par de imágenes repetiremos todo lo que aparece entre las etiquetas div.
En la plantilla se definiría la clase “presentar”. Se trata de aplicar un estilo CSS para el estado normal del elemento y otro distinto para ese mismo elemento en estado: hover:
.presentar {
text-align: center;
}
.presentar a, .presentar img, .presentar a span {
border:0;
padding:0;
margin:0;
}
.presentar a {
position: relative;
display: inline-block;
}
.presentar a span {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0px;
left: 0px;
}
.presentar a:hover span {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
EJERCICIO:
Con imágenes distintas, consigue el efecto de cambio de imagen al pasar el ratón de las dos maneras explicadas: sólo con HTML y definiendo una clase en CSS.
Estas prácticas son adaptaciones de post del CiudadBlogger y de Oloblogger .
