Efectos con hover y transition en CSS en imágenes

- 👤 Andrés Cruz

🇺🇸 In english

Efectos con hover y transition en CSS en imágenes
Ver ejemplo Descargar

En las siguientes entradas daremos algunos experimentos empleando el selector hover y las Transiciones en CSS y/o Animaciones en CSS para tener algunos efectos curiosos que tal vez te sirvan para implementarla en tu web.

Para este primer experimentos además del selector hover haremos uso de otros selectores como before y after que en conjunto permiten crear el siguiente efecto:

Pase el cursor por encima

La idea es...

Veámoslo en parte; primero empleamos un único div cuyo hijo solo será una imagen; el siguiente HTML representa lo comentado anteriormente:

<div class="cuerpo leon derecha">
	<img src="leon.jpg" />
</div>

Más un poco de CSS para darle la forma deseada a nuestro div e imagen:

.cuerpo {
   width: 200px;
   height: 200px;
margin:30px auto 0 auto;
}
.cuerpo img{
		width:inherit;
		height:inherit;
		border-radius:50%;
}

Obtenemos el siguiente resultado:

Capas del experimento

Analizando el CSS anterior…

  • Un tamaño fijo y proporcional alineados.
  • Especificamos el tamaño de las imágenes igual a la del padre empleando el valor inherit.
  • Además de aplicar un redondeo a las imágenes y emplear la propiedad object-fit para cambiar la relación de aspecto hablado en una entrega anterior.

Los selectores before y after

Con los selectores before y after es posible crear otros "contenedores" respectivamente:

Capas del experimento

Los selectores before y after son tan versátiles que inclusive pueden tomar distintas propiedades como los div.

El CSS renderizado a través del selector before se mostrará encima de la imagen dando como efecto un borde translúcido encima de la misma; mientras que el CSS renderizado del selector after solo se mostrará cuando el cursor se posicione encima del div.

CSS del selector before

Para el borde redondeado y difuminado especificado en el CSS del selector before se emplea:

.cuerpo:before {
		display: block;
		border-radius: 50%;
		content: '';	
		box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.5);
         width: inherit;
         height: inherit;
		position: absolute;
}

Analizando el CSS anterior…

  • Empleamos la propiedad box-shadow para crear un borde interno.
  • De nuevo se especifica el tamaño del "contenedor" igual al del div empleando el valor inherit.
Con el valor inherit se heredan los valores del padre.

CSS del selector after

Ahora falta especificar el CSS para el selector after el cual se mostrará cuando se posicione el cursor encima del div a través de una transición:

.cuerpo:after {
 		display: table-cell; 
		border-radius: 50%;
		box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.5);
                	width: inherit;
                	height: inherit;
		position: absolute;
		background: rgba(0, 0, 0, 0.8);
		transition: all 1s;
		opacity:0;
		content:"";
		color:#FFF;
		text-align:center;
  		font-family: Arial;
	    	font-size: 12px;
   		font-weight: bold;
		line-height: 50px;
}

Analizando el CSS anterior…

  • opacity establecido en cero para que no se vea el "contenedor".
  • Especificamos la transición con la propiedad transition.

Tenemos casi todo listo, falta definir el comportamiento (transición) que ocurrirá cuando posicionamos el cursor encima del div e inicie la Transiciones en CSS; para esto empleamos los siguiente selectores combinados con distintos ángulos:

.derecha:after {
/*Mi CSS*/
}

Por ejemplo; definimos las siguientes transformaciones especificando todos los lados y laterales:

	.derecha:after {
		transform:translate(300px,-200px);
	}
	.izquierda:after {
		transform:translate(-300px,-200px);
	}
	.arriba:after {
		transform:translate(0,-500px);
	}
	.abajo:after {
		transform:translate(0,300px);
	}
	.lateral1:after {
		transform:translate(-300px,-300px);
	}
	.lateral2:after {
		transform:translate(300px,-300px);
	}
	.lateral3:after {
		transform:translate(300px,300px);
	}
	.lateral4:after {
		transform:translate(-300px,300px);
	}
            .derecha:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .izquierda:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .arriba:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .abajo:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .lateral1:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .lateral2:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .lateral3:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .lateral4:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .leon:after {
		content:"León";
            }
            .chita:after {
		content:"Chita";
            }

Puedes ver el código completo y descargar los recursos en los siguientes enlaces:

Ver ejemplo Descargar
Efectos con hover y transition en CSS - Filtros-
Ver ejemplo Descargar

En la entrega anterior Efectos con hover y transition en CSS (parte 1) vimos como crear un curioso overlay sobre nuestras imágenes; en esta entrada veremos cómo emplear los Filtros en CSS3 en conjunto con las transiciones sobre imágenes permiten crear efectos muy llamativos para los filtros soportados:

Creando nuestro efecto

Como podrás haber notado; las imágenes por defecto tiene un filtro aplicado, y al posicionar el cursor encima de las mismas el filtro es removido de manera progresiva dando como resultado un efecto atractivo a través de las Transiciones en CSS.

CSS de las imágenes (Filtros y Transiciones)

Primero definiremos el CSS base del contenedor y de las imágenes:

            .cuerpo {
                width: 30%;
                height: 200px;
                margin:30px 7px;
                float:left;
                transition:1s all;
            }
            .cuerpo img{
                width:100%;
                height:inherit;
                object-fit: cover;
                box-shadow: 0 0 20px #999;
                border:2px solid #333;
            }
            .grayscale{
                -webkit-filter: grayscale(100%);
            }
            .hue-rotate{
                -webkit-filter: hue-rotate(220deg);
            }
            .sepia{
                -webkit-filter: sepia(100%);
            }
            .contrast{
                -webkit-filter: contrast(190%);
            }
            .saturate{
                -webkit-filter: saturate(50%);
            }
            .blur{
                -webkit-filter: blur(10px);
            }
            .invert{
                -webkit-filter: invert(100%);
            }
            .brightness{
                -webkit-filter: brightness(0.25);
            }
            .opacity{
                -webkit-filter: opacity(34%);
            }

Nuevamente empleamos la propiedad object-fit para cambiar la relación de aspecto; de esta manera podemos trabajar fácilmente con imágenes de distintas relaciones de aspecto sin distorsionar las mismas.

CSS de las imágenes (:hover)

Y como comentamos al inicio de esta entrada, el CSS para el :hover simplemente remueve los filtros CSS definidos en la sección anterior:

             .hue-rotate:hover{
                -webkit-filter: hue-rotate(0deg);
            }
            .brightness:hover{
                -webkit-filter: brightness(1);
            }
            .sepia:hover{
                -webkit-filter: sepia(0);
            }
            .saturate:hover{
                -webkit-filter: saturate(1);
            }
            .opacity:hover{
                -webkit-filter: opacity(1);
            }
            .invert:hover{
                -webkit-filter: invert(0);
            }
            .grayscale:hover{
                -webkit-filter: grayscale(0);
            }
            .contrast:hover{
                -webkit-filter: contrast(100%);
            }
            .blur:hover{
                -webkit-filter: blur(0px);
            }

Puedes descargar el experimento completo en los siguientes enlaces:

Ver ejemplo Descargar
Efectos hovers sobre imágenes con CSS

Efectos hovers sobre imágenes con CSS

 En esta entrada veremos cómo crear un simple efecto hover sobre una imagen como la mostrada en la cabecera de esta entrada empleando un poco de CSS, HTML y JavaScript (jQuery).

Para esto se coloca una imagen como fondo en un contenedor y colocar múltiples cuadros consecutivos (divs) de una fracción del tamaño del fondo sin un color definido para que sean invisibles por defecto; para facilitar la inserción de los mismos empleamos un sencillo JavaScript que creará estos contenedores; al posicionarnos encima de los cuadros mediante una Transiciones en CSS pasa a tener un color semi-transparente progresivamente:

Ver ejemplo

Pase el cursor de un extremo al otro de la imagen.

El CSS para el documento consta de una imagen que ocupe el total de la página; cosa que sería un poco más complicado hacerla a través de una etiqueta img:

    html {
        background: url(tigre.jpg) no-repeat center center fixed;
        background-size: cover;
    }

El CSS de los cuadros es el siguiente:

    .block {
        width: 6.25%;
        float: left;
        position: relative;
        transition: opacity 500ms ease;
        background-color: transparent;
        transition: all 3s linear;
    }
    .block:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
    .block:hover {
        background-color: rgba(255, 255, 255, 0.25);
        transition: all 100ms linear;
    }

Este es el JavaScript que permite construir los cuadros encima de la imagen:

    var i = 0,
            newBlock = '<div class="block"></div>',
            $blockContainer = $(".blocks");
    for (i = 0; i > 150; i++) {
        $blockContainer.append(newBlock);
    }

Y esto es todo, con esto obtenemos el efecto mostrado anteriormente.

A raíz de esto, podemos cambiar un poco el efecto y en vez de que aparezca variado la opacidad, haremos que aparezcan estableciendo unos bordes internos con un poco de CSS:

Ver ejemplo

Pase el cursor de un extremo al otro de la imagen.

El CSS es el siguiente:

    .block {
        width: 6%;
        float: left;
        position: relative;
        box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.25);
        transition: all 1s ease;
    }
    .block:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
    .block:hover {
        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25);
    }

El siguiente experimento en la lista, es la de algunos efectos interesantes que se pueden lograr con listas en CSS.

Acepto recibir anuncios de interes sobre este Blog.

En esta entrada veremos algunos experimentos con transiciones en CSS empleando además selectores (hover, after y before), también veremos cómo emplear los Filtros en CSS en conjunto con las transiciones sobre imágenes permiten crear efectos muy llamativos para los filtros soportados.

| 👤 Andrés Cruz

🇺🇸 In english
🏷️Transición 🏷️Propiedades 🏷️Animación 🏷️CSS 🏷️Imagen