Crear una imagen cambiante es bastante fácil con CSS. Dale al elemento una imagen de fondo, luego en su :hover, cambiar el background-image. Es una buena práctica combinar ambas imágenes en una y cambiar el background-position en lugar de usar dos imágenes separadas, esa es la idea de los sprites CSS. Pero, ¿qué sucede si desea convertir una imagen en otra, no solo tener un cambio abrupto?
La solución es crear un elemento adicional sobre el original con cero. opacity y el background-position ya colocado en su lugar. Luego en el :hover, se desvanecen en la opacidad. Aquí hay tres formas de hacerlo, usando un pequeño gráfico de flecha.
(Flechas a través de Preguntar de manera diferente)
Ver demostración
Way The First (progresividad razonable)
Deje caer un tramo dentro del elemento original. El intervalo será esencialmente el estado de desplazamiento. Lo sé, el marcado adicional apesta, pero necesitamos un elemento adicional para usar y los pseudoelementos no se realizarán la transición en la mayoría de los navegadores.
<a href="https://css-tricks.com/fade-image-within-sprite/#" class="arrow">Arrow<span></span></a>La flecha en sí utilizará un reemplazo de imagen CSS básico y el fondo se colocará en la posición predeterminada.
.arrow {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 36px;
height: 36px;
background: url(sprites.png) no-repeat;
}El posicionamiento relativo utilizado allí es para el tramo, que posicionaremos absolutamente para que sea exactamente del mismo tamaño. Su posición de fondo se cambiará a su lugar para el rollover, su opacidad se establecerá en cero y las transiciones CSS3 se colocarán en su lugar.
.arrow span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(sprites.png) no-repeat;
background-position: -50px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}Luego, al pasar el mouse, aparece la opacidad:
.arrow:hover span {
opacity: 1;
}Camino al segundo: extra progresivo
La única razón por la que estamos usando el intervalo anterior es porque (en el momento de escribir este artículo) solo Firefox 4 está haciendo transiciones en pseudo elementos. Es razonable pensar que en el futuro WebKit y otros navegadores también admitirán esto. Entonces podríamos limpiar el marcado de esta manera:
<a href="https://css-tricks.com/fade-image-within-sprite/#" class="arrow">Arrow</a>Entonces el resto del CSS es exactamente el mismo, solo que usamos: after en lugar del span.
.arrow:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(sprites.png) no-repeat;
background-position: -50px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrow:hover:after {
opacity: 1;
}Way The Third: soporte heredado
Algunos navegadores no admiten pseudoelementos ni transiciones de ningún tipo. Si queremos que esto sea lo más perfecto posible para todos los navegadores, tendremos que usar el HTML adicional y confiar en JavaScript (jQuery…) para ayudar. Volvemos al tramo.
<a href="https://css-tricks.com/fade-image-within-sprite/#" class="arrow">Arrow<span></span></a>El CSS es básicamente el mismo, pero simplificado, ya que no estamos manejando ninguna de las cosas de hover o fadein aquí.
.arrow {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 36px;
height: 36px;
background: url(sprites.png) no-repeat;
}
.arrow span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(sprites.png) no-repeat;
background-position: -50px 0;
}jQuery se encargará del desvanecimiento. Primero ocultaremos el intervalo, luego adjuntaremos los eventos mouseenter y mouseleave a través de la función de desplazamiento que hace el desvanecimiento.
$(function() {
$(".arrow")
.find("span")
.hide()
.end()
.hover(function() {
$(this).find("span").stop(true, true).fadeIn();
}, function() {
$(this).find("span").stop(true, true).fadeOut();
});
});Los tres ejemplos:
Ver demostración