[SOLUCIONADO] Alguien conoce un buen TUTORIAL para hacer hover en imagen

[alexander_sp]

Hola!!!
Estoy buscando algun turorial para poder hacer algo asi o parecido:
http://gudh.github.io/ihover/dist/index.html

Algo para hacer de forma sencilla con algo de HTML y CSS que ya venga predefinido ya que no se programacion.

Gracias!!!

[AlejandroGalvez]

¿Y por qué no utilizas esa misma librería? O-o

http://gudh.github.io/ihover/dist/index.html#usage

Puedes hacer esos efectos fácilmente con nociones básicas de CSS. Utilizando "transition" y cambiando las propiedades de los elementos con el modificador :hover. Si requieres una animación compleja puedes crearla tu mismo:

http://www.w3schools.com/css/css3_animations.asp

[alexander_sp]

Ahora me lo miro.... Gracias!
pero lo necesito para WordPress

[ArturoGallegos]

exactamente como lo harías en HTML.

solo tienes que leer el código de esos ejemplos y tendrás todo lo que necesitas.

[alexander_sp]

Ok! gracias, miraré a ver si soy capaz ;)

[alexander_sp]

Hola Alejandro;
sabes que tengo que hacer para utilizar ihover?¿
http://gudh.github.io/ihover/dist/index.html#usage
Pq simplemente poniendo el codigo: <link href="styles/ihover.css" rel="stylesheet">
no funciona

Es que el otro link que me has pasado no se como funciona!
No tengo suficientes conocimientos

[AlejandroGalvez]

Eso se debe a que primero debes bajarte la librería que vas a usar e incluirla con el resto de archivos de tu tema/plugin o el proyecto que tengas entre manos:

https://github.com/gudh/ihover

Puedes bajarlo del enlace anterior, concretamente este archivo:

https://github.com/gudh/ihover/blob/...src/ihover.css

Luego lo incrustas (depende de qué quieras o vayas a hacer, pero normalmente deberías hacerlo con la función wp_enqueue_style de wordpress). Y por último utilizas las clases CSS tal y como te indican en la página de demo:

http://gudh.github.io/ihover/dist/index.html

[alexander_sp]

Muchas gracias Alejandro!!!
Perdona que te de la paliza, pero hay una cosa que no me ha quedado clara, cuando dices:
"pero normalmente deberías hacerlo con la función wp_enqueue_style de wordpress"
Te refieres a entrar en el panel de control > apariencia > Editor (donde dentro de mi tema existe el archivo "Stylesheet (style.css)" y copiar todo esto:
http://https://github.com/gudh/ihove...src/ihover.css ???????

O te refieres a que busque via FTP una carpeta dentro del tema donde haya un archivo en el que pueda pegar todo el código ?????????

[AlejandroGalvez]

Efectivamente puedes añadir ese código a tu plantilla style.css si tus conocimientos son tan escasos. Aunque lo recomendable sería que crearas un archivo ihover.css y copiaras el código dentro (o lo descargaras directamente) y pusieras este archivo con el resto de archivos de tu tema via FTP. Luego incrustarías este archivo desde functions.php con la función wp_enqueue_style():

https://codex.wordpress.org/Function..._enqueue_style

Pero dado que no te defiendes muy bien y te va a dar dolores de cabeza, mejor hazlo como lo tienes pensado que para eso da WordPress dichas herramientas.

Control > Apariencia > Editor > Style.css y añades el código al final del todo.

Luego solo sigue los ejemplos de demo para añadir los efectos :hover. Espero que quieras utilizar estos efectos dentro de entradas, páginas o el widget de texto. Porque si quieres añadirlo por tu plantilla vas a tener que modificar archivos y te va a tocar aprender un poquito más que solo utilizar el Editor.

[alexander_sp]

Hola Alejandro!

Lo primero! darte las gracias, lo he conseguido mediante el editor de WordPress de las CSS.

Solo hay una cosa, que no sale bien del todo; pero me da no se que darte la turra. Por eso te lo comento, pero si no tienes tiempo o no puedes mirarlo no te preocupes.

Mira en la pag. que estoy haciendo, me sale el hover, con la imagen inicial antes de hacerse grande demasiado pequeña, te la dejo sin imagen insertada para que veas mejor el problema.
http://eschoolapio.org/
En la parte de abajo, lo verás. No se cual es el motivo, he revisado las CSS y no pone nada de tamaño de imagen en el ihover.css

Lo dicho! al margen de este problemilla, estoy muy contento con el resultado.
Graciasssss !!!!!
Un saludo
Alejandro

[HackID1]

Espectacular diseño le da esto a las páginas web con tan solo usar CSS.

:) Gracias por compartir saludos!!!!

[AlejandroGalvez]

alexander_sp no entiendo bien el problema pues no hay imagen y no puedo comprobar bien cuál es el fallo. Pero a simple vista hay un par de cosas que deberías corregir:

1- Dentro del código HTML para esa estructura hover hay varias etiquetas <p></p> sueltas. Indican párrafo y generan espacios entre elementos que deforman la estructura. Estas etiquetas las inserta automáticamente el editor TinyMCE de WordPress y son muy molestas... Lo mejor que puedes hacer es trabajar directamente en la pestaña HTML del editor, y no en la visual. También pegar todo el bloque de código de la estructura HTML del hover en una sola línea sin espacios. Así WordPress no detectará salto de línea y no insertará esas etiquetas <p>

2- Por alguna razón creo que tu imagen está tomando un ancho y alto de 300px, cuando debería ajustarse al 100% del alto. Lo extraño es que no hay ninguna regla CSS ordenando este comportamiento... Cómo sea, si añades este código a tu style.css (al final del todo) debería arreglarse ese problema:

Código CSS:

.ih-item .img {
    width: 100%;
    height: 100%;
}
 

PD: Los tamaños de los recuadros :hover están predefinidos ya en el css que has pegado, el de i:hover.css. Por lo tanto, si quieres otros tamaños que se ajusten mejor a tus imágenes tendrás que especificarlo por CSS.

[alexander_sp]

Hola !!! me puedes llamar Alejandro, es mi nombre.

Buffff ! ya esta solucionado el problema.
Eres un mago Alejandro ;)
Muchas gracias de nuevo!!!! y aquí estoy en el caso de que necesites cualquier cosa!!!!!


Un saludo
Alejandro

[AlejandroGalvez]

De magia nada, como todo en la vida, es la experiencia que se obtiene al intentar realizar ideas que tienes en la cabeza como tu acabas de hacer.

Suerte con el proyecto.