Imagen mousehover

  • Resuelto emi8

    (@emi8)


    hace 5 años, 4 meses

    Hola de nuevo, q tal.

    En esta ocasion me gustaría preguntar como conseguir un efecto al hacer mousehover en una imagen para que aparezca un color semitransparente, como x ejmplo se puede ver en la web:

    https://degoku.net

    Son las 3 imagenes en fila que justo debajo del encabezado. Ya lo he visto en un par de web y me gusta: es sencillo, y las letras permanecen en el mismo color sin ser alteradas. Pero esto es secundario. He probado varios plugins pero no encuentro uno que se adecue. La mayoria x no decir todos, estan capados para que compres la versión premium. Y el q no te deja cambiar el color del color al hacer mousehover, no te deja cambiar el tamaño de la foto. Pongo una lista de los q he probado hasta ahora:

    Envira Gallery
    Hover image button
    Image caption hover
    Image caption hover effects
    Image hover effects
    Image Hover Effects – SB Caption Hover Effects Collection
    Tiled Galleries Carousel Without Jetpack

    Tb he probado a Explorar la pagina en cuestión, a ver si encontraba info relacionada, pero sin éxito. A ver si alguien me puede ayudar.

    salu2

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Moderador Fernando Tellado

    (@fernandot)

    hace 5 años, 4 meses

    Los efectos «hover» se consiguen por CSS. Aquí te dejo unos ejemplos y cómo hacerlo:

    https://www.w3schools.com/css/css_link.asp

    Iniciador del debate emi8

    (@emi8)

    hace 5 años, 4 meses

    Eey q tal Fernando, ayudando como siempre. Les echo un vistazo y a ver q tal. Gracias x responder!

    Moderador Fernando Tellado

    (@fernandot)

    hace 5 años, 4 meses

    🙂

    Iniciador del debate emi8

    (@emi8)

    hace 5 años, 4 meses

    Hola de nuevo, pues no lo he conseguido. El enlace q pusiste era xa links, a mi me gustaría q fueran imágenes. He ido a la sección CSS Gallery, a ver q tal, xo no veo como poner lo de mousehover xa q cambie de color.

    Como tienen un editor a tiempo real, he añadido color: white; debajo de:

    div.gallery:hover {
    border: 1px solid #777;

    Quedó asi:

    div.gallery:hover {
    border: 1px solid #777;
    color: white;

    Con eso consigo q el texto d descripción se ponga todo blanco al hacer mousehover; no es lo q busco. De hecho las imagenes no las quiero con descripción.

    Tb he probado a poner lo mismo de color: white; debajo de:

    div.gallery img {
    width: 100%;
    height: auto;

    y tampoco funciona.

    salu2

    Iniciador del debate emi8

    (@emi8)

    hace 5 años, 4 meses

    Buenas, después de mucho buscar y leer, ya he dado con la tecla. Lo que estaba yo buscando se llama «Navegación por clusters», q viene a ser una foto con texto enlazadas con alguna entrada o pagina de tu web, eso es todo. Os dejo el link de dnd encontré el código xa añadir:

    https://www.pedropablomoral.com/posicionamiento-seo-santander-cantabria/navegacion-web-por-clusters-sin-orbital-theme/

    X si le sirve a alguien. Cierro hilo!

    salu2

    • Esta respuesta fue modificada hace 5 años, 4 meses por emi8. Razón: falta ortografía
Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • El debate ‘Imagen mousehover’ está cerrado a nuevas respuestas.

Etiquetas