¿Cómo agregar un enlace a una imagen con efecto hover en HTML?

  • Autor Autor JoseCuevas
  • Fecha de inicio Fecha de inicio
JoseCuevas

JoseCuevas

Iota
Verificación en dos pasos activada
Verificado por Whatsapp
Hola.

Ya lo intenté de varias maneras pero no puedo, o no he encontrado la forma.

Lo que hice fue hacer un efecto hover en la imagen, pero lo que quiero es que haya un enlace que dirija a otra parte de la web (otra url), ¿Sabrían cómo?

(Esta es la web) Al pasar el mouse por el cuadro de abajo, se pone otra imagen con el texto Ver más, y al darle clic en la imagen de Ver más dirija a Google por ejemplo.

El efecto lo puse en el primer cuadro, aquí.

68c73e49d7a15198d434150835ea4799.webp

Esto utilice:
PHP:
<img src="imagenes/ib1.png" onmouseover="this.src='imagenes/ib2.png';" onmouseout="this.src='imagenes/ib1.png';"/>

ib1 es la imagen que sale al principio (cuando no pasas el raton)
ib2 es cuando sale el texto Ver más
OJO: El efecto está para el primer cuadro.

Espero me pueda ayudar 😀!


Por si preguntan, sí, utilicé los colores de forobeta jajaja
 
Podrías colocar un flotante en lugar de cambiar la imagen. Con .prepend de jQuery logras algo asi.

Por ejemplo, yo tengo un botón de descarga, si alguien hace click derecho, encima (exacto) del botón se posiciona un cuadro con texto, y desaparece despues de unos segundos.
 
Podrías colocar un flotante en lugar de cambiar la imagen. Con .prepend de jQuery logras algo asi.

Por ejemplo, yo tengo un botón de descarga, si alguien hace click derecho, encima (exacto) del botón se posiciona un cuadro con texto, y desaparece despues de unos segundos.

No tengo conocimiento de jQuery u.u

Lo que quiero es que nadamás dirija a otro sitio, que el texto siga ahí :/
 
Prueba esto [MENTION=26950]JoseCuevas[/MENTION]:
Insertar CODE, HTML o PHP:
<a href="(URL DE TU WEB)" target="_blank"><img src="imagenes/ib1.png" onmouseover="this.src='imagenes/ib2.png';" onmouseout="this.src='imagenes/ib1.png';"/></a>

El target="_blank" es si quieres que la nueva pagina abra en otra pestaña. Para que abra en la misma, le cambias el "_blank" por "_self".
 
Prueba esto [MENTION=26950]JoseCuevas[/MENTION]:
Insertar CODE, HTML o PHP:
<a href="(URL DE TU WEB)" target="_blank"><img src="imagenes/ib1.png" onmouseover="this.src='imagenes/ib2.png';" onmouseout="this.src='imagenes/ib1.png';"/></a>

El target="_blank" es si quieres que la nueva pagina abra en otra pestaña. Para que abra en la misma, le cambias el "_blank" por "_self".

Eres grande hermano! Muchas gracias, con tu código lo solucioné 😀
 
esta bueno este código yo lo hacia de otra manera pero igual me agrado este método :welcoming:
 
Atrás
Arriba