Cómo crear un efecto de enfoque al pasar el mouse usando CSS
Usemos CSS para crear el efecto de enfoque que consiste en hacer que un objeto sea más visible al pasar el mouse por encima
Si llegó a esta página, significa que lo más probable es que esté buscando nuevos efectos para insertar en las páginas web, como la creación de un efecto de enfoque al pasar el mouse.
Pero antes de comenzar, comprendamos qué es este efecto y cómo funciona.
El efecto Focus es uno de los efectos que más vemos en las páginas web, consiste en hacer más visible un objeto cuando el mouse pasa sobre otro, mejorando así la experiencia de los visitantes.
Cómo animar elementos HTML al pasar el mouse
Comencemos creando un nuevo documento HTML y configurando la estructura de la página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus effect on hover using CSS</title>
</head>
<body>
</body>
</html>
Una vez creado el archivo HTML, podemos proceder con los elementos principales que compondrán nuestro documento.
Hemos creado una macro contenedora a la que le hemos asignado la clase card-container y dos <div></div>elementos internos que serán las tarjetas sobre las que se insertará la animación Web y por tanto el efecto Focus que será activado al pasar el mouse.
Una vez creada esta primera parte en HTML, podemos pasar a escribir el código CSS para formatear los elementos HTML y definir su apariencia estética. Una vez que se completa la parte HTML, podemos continuar agregando el estilo a cada elemento creado.
Para mayor comodidad y organización procedemos a la creación de un nuevo archivo CSS en el que insertaremos el código deseado.
Lo guardamos y le ponemos un nombre para poder recordarlo fácilmente.
Una vez que el archivo 'style.css' se ha incluido en el archivo HTML, podemos proceder a compilar el archivo definiendo el estilo de todos los elementos presentes en su interior. Así que procedamos con la definición del estilo de los elementos:
Lo primero que debe hacer es decidir el tamaño y cuánto espacio tendrá que ocupar la tarjeta. Como se puede observar en el código anterior, la tarjeta tiene un ancho del 50% y una altura proporcional a su ancho gracias a las propiedades aspect-ratio:1;.
Además, utilizando la regla cursor:pointer; podremos cambiar automáticamente la apariencia del cursor cuando se posiciona sobre las cartas.
Luego agregamos un efecto redondeado a las esquinas a través de la propiedad border-radius.
La última línea de código CSS presente para los elementos de la tarjeta está destinada a la transición, de hecho, cuando pasamos el mouse sobre la tarjeta en 230 milisegundos, la animación de la opacidad en la tarjeta será visible.
Entraremos en detalles en breve. Ahora definamos el color de fondo de las tarjetas individuales para distinguirlas mejor. Así que agreguemos una clase que usaremos para asignar diferentes colores y crear un efecto aún más visible.
Una vez que hemos decidido el tamaño y la apariencia de nuestros objetos, es hora de escribir las líneas de código relacionadas con la animación del efecto Focus.
Comienzo anticipando que este es un efecto que generalmente se crea con el uso de JavaScript pero gracias a las recientes evoluciones de CSS es posible crearlo incluso de una manera más simplificada. A continuación veremos cómo es posible crear el mismo efecto para que también lo puedan conseguir aquellos que no conocen JavaScript.
Las líneas de código escritas arriba están relacionadas con el efecto Focus, como puede ver, estamos declarando la clase card-container insertando el efecto hover. Ahora recordemos la tarjeta de clase insertando el valor not(:hover), de esta manera será posible enfocarse solo en la tarjeta seleccionada al pasar el mouse mientras que los otros elementos sufrirán una disminución de opacidad.
Habiendo declarado varias cartas, también debemos incluir el valor: no para que cada vez que pasemos el mouse sobre una de las cartas, todos los demás elementos con la misma clase sufran el efecto Focus en la dirección opuesta y por lo tanto resalten el elemento seleccionado.
Una vez declaradas las clases y efectos que queremos aplicar, podemos proceder a la creación del efecto final, simplemente insertando la propiedad opacity y definiendo la intensidad de la opacidad, en nuestro caso 0.4.
Gracias a esta sencilla línea de código hemos impuesto a la clase card-container que al pasar el ratón sobre ella la opacidad será de 0,4, además hemos indicado en la clase card que solo la card on por el que pasará el ratón debe respetar la regla prevista.
Me parece un efecto muy bonito y muy sencillo de crear, gracias a la animación del efecto Focus podrás mejorar la experiencia de usuario de tus proyectos y aumentar el tiempo de navegación dentro de las páginas web, ofreciendo a los visitantes una mejor interacción.
ES 
English - EN 
Français - FR 
