Cómo agregar efecto de rejilla al pasar el ratón sobre una imagen en HTML

trafalgarmeow · 30 Oct 2015

Hola, no se como explicarlo xD Lo siento por el título. Pero basicamente busco hacer algo así:

Es decir, que al pasar el ratón por encima de la imagen se ponga "modo rejilla" XD... Y que salga lo de serie y el año en las esquinas, el título, todo eso.
Pero no se como hacerlo en html :neglected:

daninseo · 30 Oct 2015

Yo se una forma pero seguro que hay formas mejores de hacerlo, bueno te dejo lo que me ocurre a mi.

Yo crearia una imagen normal como la tienes y otra con el titulo y las rejillas,año ect, todo eso lo puedes añadir con photoshop o fireworks...

Después con este código colocas la URL de las dos imágenes y ya debería cambiar al pasar el ratón por encima.

Insertar CODE, HTML o PHP:

<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>

Espero que te sirva de ayuda.
Un saludo.:encouragement:

trafalgarmeow · 30 Oct 2015

Así sobreponiendo otra imagen ya lo había pensado, pero no voy a estar currandome imagen a imagen o.o
El modo en que muestra en el ejemplo muestra el título, etiquetas... Pero html no sobreponiendo una imagen :neglected:
Pero gracias, si no encuentro como, al final tendré que hacer eso

intoroddex · 30 Oct 2015

Si pones la fuenta capaz te puedan ayudar :encouragement:

trafalgarmeow dijo:
Así sobreponiendo otra imagen ya lo había pensado, pero no voy a estar currandome imagen a imagen o.o
El modo en que muestra en el ejemplo muestra el título, etiquetas... Pero html no sobreponiendo una imagen :neglected:
Pero gracias, si no encuentro como, al final tendré que hacer eso

trafalgarmeow · 30 Oct 2015

intoroddex dijo:
Si pones la fuenta capaz te puedan ayudar :encouragement:

Sí, también es que soy un poco tonto 😎

Anime | Akiba-kei no Fansub

intoroddex · 30 Oct 2015

:encouragement::encouragement::encouragement: Perfecto asi capaz ayuden , asi ala vista no se entendia para algunos

trafalgarmeow dijo:
Sí, también es que soy un poco tonto 😎

Anime | Akiba-kei no Fansub

trafalgarmeow · 30 Oct 2015

Alguien me ayuda? :neglected:

lombervid · 30 Oct 2015

Simplemente es una capa encima de la imagen con otra imagen de fondo y con opacidad, que se muestra (la capa de encima) al hacer :hover.

sanyeta1992 · 30 Oct 2015

¿Ya te funciona o todavía necesitas ayuda?

trafalgarmeow · 31 Oct 2015

Help :neglected::neglected:

clasi · 31 Oct 2015

Aqui te dejo un ejemplo para que te funcione tal cual citas la fuente:

.capa{ background: #ccc; height:300px;width:3000px; position:absolute; top:0px; z-index:999; left:0px; display:none;}
#div1{float:left: height:300px; width:3000px; position, relative;}
#div1:hover .capa{ display:block;}

En: (background: #ccc😉 lo reemplazas por una imagen, en este caso la cuadricula con opacidad, o bien un png plano con transparencia y listo!

Cómo agregar efecto de rejilla al pasar el ratón sobre una imagen en HTML

trafalgarmeow

daninseo

trafalgarmeow

intoroddex

trafalgarmeow

intoroddex

trafalgarmeow

lombervid

sanyeta1992

trafalgarmeow

clasi

Temas similares