Efecto Hover sobre icono módulo anuncio

May 2, 2018 | CSS, DIVI (Elegant Themes)

En este tutorial voy a incluir una serie de códigos CSS para darle un poco de dinamismo a los iconos del módulo anuncio. Lo haremos que cambien de color, que aumenten de tamaño, roten, se desplacen, todo ello cuando nos colocamos sobre ellos.

Estos códigos los colocaremos en DIVI > Personalizador de Temas > CSS adicional.

Coloquemos nuestros primer módulo.

Efecto 1

Efecto de cambio de color al pasar el ratón sobre el icono.

Para darle un efecto individual a cada icono, le daremos una id independiente a cada módulo de anuncio.

Efecto Hover Color 1 Namaste Web

Una vez que le hemos dado la id al módulo, copiamos el siguiente código y lo pegamos donde antes indiqué:


#color .et_pb_animation_top.et-animated
{
transition: all 1s;
}

 

#color .et_pb_animation_top.et-animated:hover
{
color: blue !important;
}

Ahora si pasáis por encima del icono, veréis el resultado.

Efecto 1

Efecto de cambio de color al pasar el ratón sobre el icono.

Ahora, haremos otro en el que el icono aumente un poco de tamaño, para ello repetimos los mismos pasos anteriores, colocando en este caso la id zoom (podéis poner el nombre que queráis, yo pongo zoom porque es más intuitivo).

#zoom .et_pb_animation_top.et-animated
{
transition: all 1s;
}

#zoom .et_pb_animation_top.et-animated:hover
{
transform: scale(1.2) !important;
}

Efecto 2

Efecto de cambio de tamaño al pasar el ratón sobre el icono.

En este tercero lo haremos rotar 360º. Pongo la id rotar

#rotar .et_pb_animation_top.et-animated
{
transition: all 1s;
}

#rotar .et_pb_animation_top.et-animated:hover
{
transform: rotate(360deg) !important;
}

Efecto 3

Efecto de rotación al pasar el ratón sobre el icono.

En este último haremos que se desplace un poco hacia arriba. Pongo la id mover

#mover .et_pb_animation_top.et-animated
{
transition: all 1s;
}

#mover .et_pb_animation_top.et-animated:hover
{
transform: translateY(-15px) !important;
}

Efecto 4

Efecto de movimiento al pasar el ratón sobre el icono.

Por supuesto, podéis cambiar la duración de la animación, donde dice 1s podéis poner por ejemplo para medio segundo 0.5s, lo cual hará más rápida la animación.

En la transición de color, yo he puesto blue, pero podéis elegir el color que más os convenga.

Esto son solo 4 ejemplos de lo que podemos hacer mediante CSS.

Espero que le busquéis utilidad.

Share This
A %d blogueros les gusta esto: