Cómo cambiar la imagen de fondo a otra imagen al pasar el mouse

La rotación al pasar el mouse es el siguiente efecto importante y complejo. Para rotar un elemento al pasar el mouse, agregue o seleccione un elemento y vaya al panel de propiedades. Vaya y haga clic en el enlace Hover en la sección Animación activada y luego marque la casilla de verificación Hover. Use el control deslizante para establecer el ángulo de rotación o ingrese el valor en el campo de entrada. Los valores admitidos para el ángulo de rotación van de 0 a 359.

Los efectos de animación Hover utilizados en los sitios web modernos se han vuelto más sofisticados. Uno de los ejemplos de efectos es Element Move on Hover. Puede agregar el movimiento de un Elemento en Hover. Agregue o seleccione un Elemento y vaya al Panel de propiedades. Haga clic en el enlace Hover y luego marque la casilla de verificación Hover. Establezca los valores para la propiedad Mover X, Y.

Al agregar la animación Hover a una forma con un fondo, es posible que desee cambiar el relleno sólido a algo atractivo, como un degradado. Para eso, seleccione una Forma y vaya al Vínculo flotante del Panel de propiedades. Haga clic en el enlace Animación activada - Pasar el cursor y marque la casilla de verificación Pasar el cursor. Seleccione el tipo de degradado para el fondo y configure el degradado.

Establecer el color del elemento al pasar el mouse ayuda a centrar la atención de los visitantes en un elemento y da una impresión y un concepto de la idea deseada sobre su significado. Puede cambiar el color del elemento al pasar el mouse. Para ello, seleccione un Elemento y, en el Panel de propiedades, vaya a la sección Animación activada, haga clic en el enlace Desplazar y luego en la casilla de verificación Desplazar. Modifique el Color que se aplicará al pasar el mouse.

Para imágenes y formas, grupos y celdas de cuadrícula, puede cambiar el radio al pasar el mouse. Los elementos se vuelven atractivos con esta propiedad, incitando a la acción (botones Comprar ahora, Leer más, etc.) y haciendo que su diseño sea único. En la sección Hover del panel de propiedades, habilite el modo Hover. Arrastre el control deslizante Radius para establecer su valor On Hover.

Puede administrar la animación de desplazamiento configurando su Duración. Establezca la duración de la animación al pasar el mouse, agregue o seleccione un elemento y vaya al Panel de propiedades. Seleccione el enlace Hover de la sección Animation On y elija la casilla de verificación Hover. Los valores admitidos para el Control deslizante son de 10 a 200, y puede ingresar un número mayor en este campo si es necesario.

El borde del elemento también es importante para mejorar la interacción de los elementos y llamar la atención de los visitantes. Puede cambiar el borde flotante para elementos tales como icono, imagen, forma, grupo, cuadrícula, etc. En la sección flotante del panel de propiedades, marque la casilla de verificación flotante. Modifique el Borde para que se muestre mientras pasa el cursor por encima de un Elemento.

Puede modificar la propiedad Shadow en Hover for Texts y otros elementos. Para establecer la sombra al pasar el mouse, agregue o seleccione un elemento. A continuación, haga clic en el enlace Hover del Panel de propiedades, marque la casilla de verificación Hover, modifique la sombra que se aplicará en Hover. Puede comenzar con uno de los ajustes preestablecidos de sombra y personalizarlo si es necesario.

Puede modificar la Transparencia del elemento al pasar el mouse para agregar interacción y atractivo al diseño del sitio web. En el Panel de propiedades, haga clic en el vínculo Desplazar y marque la casilla de verificación Desplazar. Establezca la Transparencia que se aplicará en Hover. Haga clic en algún lugar del bloque para anular la selección del elemento. Pase el cursor sobre el elemento para probar el cambio de transparencia.

La escala puede parecer la reacción más natural en su cursor. Por lo tanto, puede ser muy popular. Puede agregar fácilmente Scale On Hover a su sitio web. Para eso, agregue o seleccione un Elemento y luego vaya al Panel de propiedades. Haga clic en el enlace Hover de la sección Animación activada y marque la casilla de verificación Hover. Desplácese hacia abajo hasta las propiedades Escalar, Rotar y Mover. El tamaño real es igual a 100.