Que aparezca texto al pasar con el mouse como aquí

Luisa29 · #1 (**permalink**) 27/04/2014, 13:56

Hola amigos, me gustaría usar este sistema que tiene esta página, pero mi web no es un blg, simplemente quiero hacer botones y que al pasar el ratón salga un texto y el fondo oscurecido, como aquí:

http://www.samhurdphotography.com/

¿Se podría hacer en una web normal sin wordpress ni nada? Gracias amigos !!

pzin · #2 (**permalink**) 27/04/2014, 14:10

Puedes usar la pseudo-clase :hover para hacer que ocurran cosas al pasar el ratón por encima de algún elemento.

En tu caso sería hacer aparecer un texto, es decir, cambiar el estado de un elemento de visiblity: hidden a visiblity: visible.

Código CSS:

Ver original<a href="#">
  <img src="gatos.jpg">
  <p>Miau</p>
</a>

Código CSS:

Ver originalp {
  visibility: hidden;
}
 
a:hover p {
  visibility: visible;
}

Luminis · #3 (**permalink**) 27/04/2014, 14:32

Si puede hacerse en una web normal, para eso eberás usar CSS:

Dentro del body del documento y a su vez dentro de las etiquetas donde deberá aparecer el botón (header, footer, donde sea, etc), coloca algo como esto:

HTML:

Código:

<body>
  <section id="boton">
    <section">Botón</section>
  </section>
</body>

CSS:

Código:

#boton {
  background: white;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  color: #000000;
  height: auto;
  text-align: center;
  width: 10%;
}

#boton:hover {
  background: black;
  border-color: red;
  color: white;
}

La propiedad hover es la que indica qué efecto cambiará el elemento al pasar el mouse sobre el.

¿Cuales son los efectos?

Los efecto dependerán de las pripiedades que quieras hacer cambiar, ejemplo:

En el ejemplo anterior el elemento con la etiqueta #boton tiene un color de texto #000000, al hacer hover sobre él, #boton:hover cambiará a color: white;.

En pocas palabras, la etiqueta con id #boton es la vista general de tu botón (la que se verá por defecto) con todas las propiedades que quieras, etc. Y #boton:hover es la que genera el cambio, siendo :hover el que indica qué cambios tendrá la etiqueta #boton.

Espero haber sido claro. Saludos!

Luisa29 · #4 (**permalink**) 27/04/2014, 15:10

Muchas gracias a ambos.

Ahora a empezar a hacer experimentos y probar, sois geniales.