[SOLUCIONADO] efecto hover con texto sobre imagen

biechevarria · #1 (**permalink**) 08/07/2016, 04:31

Hola.

Buenas tardes.

Estoy realizando una pagina web con wordpress, la cual está quedando muy bien, pero ningun plugin free me soluciona esto, y dado que soy partidario de usar los menos posibles, me gustaría saber como hacer que aparezca un texto al pasar el mouse por encima de una imagen.

algo como lo de esta web pero con sin efectos, solo con un fondo y algo de tansparencia [URL="http://www.mcaitor.com/diseno-web/diseno-web-pozuelo-de-alarcon.htm"]http://www.mcaitor.com/diseno-web/diseno-web-pozuelo-de-alarcon.htm[/URL]
Saludos y mcuhas gracias a todos por adelantado.

#2 (**permalink**) 08/07/2016, 10:03

ve esto

Código HTML:

Ver original<html>
    <head>
        <style type="text/css">
        .someDiv{
        color:#000000;
        } 
        .someDiv:hover
        {
        color:#00ff00;
        }
        </style>
    </head>
    <body>
        <div class="someDiv">hover me!!</div>   
    </body>
</html>

Alexis88 · #3 (**permalink**) 08/07/2016, 12:48

Si te fijas en el código fuente de esa página, cada cuadro es un <div> que contiene a un <img> y a otro <div> que contiene a otro <img>, estando este último <div> oculto. Lo único que tendrías que hacer es mostrar al <div> interno (el oculto) al momento de que ingrese el cursor del ratón en el <div> principal y ocultar a la imagen que inicialmente se ve. Y el proceso inverso se daría al retirar el cursor del ratón del mismo.

Los eventos mouseover y mouseout te servirán para ejecutar dichas acciones.

Ejemplo

biechevarria · #4 (**permalink**) 29/08/2016, 05:21

Muchas gracias Alexis.

Me ha sido de gran ayuda. Ejemplo practico, visual y mas o menos intuitivo.