Los mejores efectos hover en imágenes

4.8/5 (5)

¿Necesitas adornar tu sitio web con los mejores efectos hover en imágenes? Aquí tienes una colección gratuita de efectos hover en CCS3 y jQuery.

Espero que te guste.

Este es el ratón que uso, un ratón inalámbrico USB/bluetooth Logitech Silent M590. Compatible con Windows/Mac/Linux y totalmente silencioso y preciso.

Caption Hover Effects

Caption Hover Effects

Aprende a crear algunos efectos de activación sencillos, pero elegantes, para los pies de fotos. La idea es tener una imagen que, al hacer hover, salga de alguna manera el título, subtítulo y un enlace.

Este es el ratón que uso, un ratón inalámbrico USB/bluetooth Logitech Silent M590. Compatible con Windows/Mac/Linux y totalmente silencioso y preciso.

directionawarehover

Aprende cómo hacer que pase el Hover en un grupo de imágenes dependiendo de hacia dónde se mueva el ratón.

Originales efectos Hover en CSS3

Original Hover Effects with CSS3

En este tutorial aprenderás cómo hacer transiciones en imágenes cuando se hace Hover en CSS3. Al hacer hover en cualquier imagen saldrá la descripción de la imagen, usando diferentes transiciones en cada ejemplo.

Efectos Hover en círculos con transiciones CSS3

Efectos hover en círculos con transiciones CSS3

En este tutorial experimentamos con efectos hover en CSS3 sobre círculos. Ya que tenemos la propiedad border-radius de CSS3, podemos crear efectos con formas circulares, cada vez más utilizadas en el diseño de páginas web.

Este es el ratón que uso, un ratón inalámbrico USB/bluetooth Logitech Silent M590. Compatible con Windows/Mac/Linux y totalmente silencioso y preciso.

Menú de texto e iconos animados con jQuery

Animated Text and Icon Menu with jQuery

Elementos de se deslizan hacia fuera con animaciones, cambian de color, … todo ello con jQuery.

Efectos Hover en imágenes con CSS3

Efectos Hover en imágenes con CSS3

Cinco ejemplos de efecto Hover hechos con distintas propiedades CSS3.

Efectos Hover en botones con CSS3

Efectos Hover en botones con CSS3

Este set de botones con animaciones CSS consta de algunos estilos y efectos para tu inspiración.

Efectos hover en iconos

Efectos hover en iconos

Aquí os dejo una colección de efectos hover con iconos, con efectos y transiciones CSS3.

Efectos hover 3D en imagenes

Efectos hover 3D en imagenes

Aprende a crear interesantes efectos 3D en imágenes con CSS3 y jQuery.

 

Por favor, valora el artículo

Esta entrada tiene 9 comentarios

  1. Gracias por esta aportación. No soy especialista en esto pero me gustaron y quisiera incluir unos de estos efectos en una web que estoy haciendo en wordpress el tema DIVI, por favor cómo puedo incluirlos en wordpress porque tienen códigoa HTML, JS y CSS y no sé cómo incluirlos. Gracias de antemano. (Y disculpa se me fue un comentario incompleto anterior a este)

    1. Muchas gracias a ti por leer mi blog. Estos efectos hover los hay que hacer con un editor web, no queda otra. Si no sabes crear themes propios de Wordprtess desde cero te va a ser muy difícil implementarlo en tu web ya que, como bien dices, tienen código HTML, CSS y en algunos casos JS. Te recomiendo buscar tutos en Youtube sobre cómo crear themes WordPress desde cero, y así ir aprendiendo. Si no sabes HTML y CSS yo empezaría por ahí.

      Un saludo

  2. Hola saludos, me gustaron todos los efectos que presentan, se ven elegantes y dan una vistosidad en una Web. Es un excelente aporte de tu parte.

  3. Hola

    Puedes hacer un tutorial para ver como debemos aplicar esto en vivo y en directo, no domino como muchos estos temas y acabo destrozando o rompiendo siempre algo

    Gracias

    1. No me dedico a hacer tutoriales, y aunque me decicara, cada uno de los efectos tiene una manera de implementarse. El truco es practicar muchas horas en una página de pruebas en local y ya verás como das con ello e incluso lo mejoras.

      Un saludo

  4. Me gustaría saber como puedo lograr el efecto de aclarar la imagen como en tu página, en donde dice “POST ANTERIOR” y “POST SIGUIENTE”
    Gracias.

    1. Primero tienes que conseguir la imagen del post anterior y del post siguiente, eso se consigue con PHP:
      ID );
      $permaPrev = get_permalink( $prev_post->ID );
      $imgDestacadaPrev = wp_get_attachment_image_src( $thumbIDPrev, ‘medium’ );
      $TitlePrev = get_the_title( $prev_post->ID );

      $next_post = get_next_post();
      $thumbIDNext = get_post_thumbnail_id( $next_post->ID );
      $permaNext = get_permalink( $next_post->ID );
      $imgDestacadaNext = wp_get_attachment_image_src( $thumbIDNext, ‘medium’ );
      $TitleNext = get_the_title( $next_post->ID );
      ?>

      Luego armas la estructura HTML que quieras y le das estilo con CSS.
      En el caso de mi web, lo hago con una transición hacia blanco cuando está en HOVER.

      1. Muchas gracias 🙂

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Cerrar menú