Cree un efecto de revelación de imagen solo para CSS con bordes transparentes
UNA Efecto revelador de imagen solo CSS Se puede resolver de diferentes maneras. En realidad, es bastante fácil codificar un diseño en el que la imagen se destaca de (es desbordado por) su fondo sólido -tu solo colocar una imagen sobre un elemento más pequeño con un fondo sólido.
Puedes obtener el mismo resultado si usas fronteras transparentes, donde guardas el tamaño del elemento de fondo del mismo como la del primer plano y añadir bordes transparentes para crear un espacio vacío para el primer plano para desbordar en.
Existen Algunas ventajas en el uso de este último método.. Ya que son los bordes transparentes los que proporcionan el área para que el primer plano se desborde, podemos controlar la dirección del desbordamiento entre los bordes izquierdo, derecho, superior e inferior. Además, tiene el mismo tamaño para el primer plano y el fondo Facilita el movimiento simultáneo de ambos elementos. a través de la página.
En pocas palabras, vamos a ver cómo crear un efecto revelador de imagen solo CSS usando un fondo sólido más pequeño con un Imagen de primer plano que tiene bordes transparentes.. Puedes revisar el demo final abajo.
1. Crea el código inicial.
HTML-sabio, solo uno En el CSS, usamos dos variables CSS, También agregamos el Nosotros añadir un vacío los Añadimos la imagen a la los Sobre el captura de pantalla abajo Puedes ver lo que tenemos hasta ahora ( Para agregar el Fondo más pequeño (deslizable) detrás de la imagen, Usaremos el otro pseudo-elemento., Creamos otra variable CSS, los anchura se calcula como los altura se calcula como Con el Un filtro CSS de Aquí esta la captura de pantalla de la demo rendido hasta ahora (con Nosotros añade el Como nosotros ya agregado el Abajo, puedes ver el demo final. Si usted muestra
--bgc y --oscuro Para el color de fondo y el dimensiones del .foo contenedor, respectivamente. En el ejemplo, utilicé el mismo valor para el ancho y la altura para obtener una caja de forma cuadrada, crear variables separadas Para la altura y el ancho si quieres una rectangular..posición: relativo gobernar a .foo, de modo que sus pseudo-elementos, que vamos a utilizar para revelando la imagen, puede ser absolutamente posicionado (ver abajo), y por lo tanto apilados unos sobre otros. .foo --bgc: # FFCC03; --dim: 300px; ancho: var (- dim); altura: var (- dim); color de fondo: var (- bgc); posición: relativa;
contenido propiedad a ambos pseudo-elementos, .foo :: antes y .foo :: después, para hacerlos correctamente prestados. .foo :: before, .foo :: after content: "; position: absolute; izquierda: 0; top: 0;
.foo Elemento, sus dos pseudo-elementos., .foo :: antes, .foo :: después, y ellos :flotar pseudo-clases obtener una transición propiedad esa voluntad añadir una transición de facilidad A ellos por 500 milisegundos (medio segundo).. .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transition: transform 500ms eas-in;
2. Añadir la imagen.
.foo :: antes pseudo-elemento como imagen de fondo, y tamaño para cubrir todo el pseudo-elemento con el anchura y altura propiedades Nosotros apílelo justo debajo de la .foo elemento utilizando la índice z: -1 regla. .foo :: before width: 100%; altura: 100%; fondo: url (camel.png) centro / cubierta; índice z: -1;
centrar palabra clave centra la imagen, mientras que la cubrir palabra clave escala la imagen a cubrir todo el elemento manteniendo su relación de aspecto. índice z se elimina de .foo :: antes para que se pueda ver):
3. Agregue el fondo deslizable
.foo :: después.--segundo, Para el ancho del borde. Damos tres fronteras transparentes al ::después pseudo-elemento arriba, derecha y abajo. .foo :: después de --b: 20px; ancho: calc (100% - var (- b)); altura: calc (100% - calc (var (- b) * 2)); borde: var (- b) sólido transparente; borde izquierdo: ninguno; cuadro-sombra: recuadro 0 var (- dim) 0 var (- bgc); filtro: brillo (.8); índice z: -2;
calc (100% - var - b) que vuelve el ancho total de .foo menos el ancho total de sus bordes horizontales (Sólo borde derecho, ya que no hay borde izquierdo).calc (100% - calc (var (- b) * 2)) que vuelve la altura total de .foo menos el ancho total de sus bordes verticales (bordes superior e inferior).sombra de la caja propiedad, nosotros también añadir una sombra de inserción horizontal del mismo tamaño que .foo (cual es var (- dim)).brillo (.8) oscurece el color de fondo un poco, y finalmente, el índice z: -2 regla coloca el ::después pseudo-elemento debajo ::antes de que contiene la imagen.índice z retirado de ambos pseudo-elementos para que puedan verse):
4. Agrega la transformación
transformar propiedad a los dos pseudo-elementos, por lo que cuando el usuario se desplaza sobre .foo, ambos pseudo-elementos son movido horizontalmente.transición propiedad a todos los elementos Al final del Paso 1, el movimiento de la imagen y su fondo son ambos animados. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Bonus: margen opcional
.foo junto a otros elementos en una página y quiere que estos otros elementos alejarse cuando la imagen y su fondo se deslizan, entonces añadir un margen derecho del mismo ancho que el de .foo al .foo: hover elemento. .foo: hover margen-derecha: var (- dim);
