Tutorial: Crear botón efecto hover Leer más.

  • Autor Autor SnakeNet
  • Fecha de inicio Fecha de inicio
S

SnakeNet

Xi
Programador
Riy4TNK.png
Pues básicamente haremos que un botón o enlace como quieran hacerlo se muestre cuando pases por encima. Muchos piensan en hacerlo con JS pero no es necesario teniendo la opción hover en css.

El primer paso es crear en html el contenido a mostrar y cual ocultar en mi caso es:

Insertar CODE, HTML o PHP:
<div class="container">
    El contenido de este sitio es primordial.
          <div class="object" align="center"><a href="#" class="text">Leer Más</a></div>
</div>
Básicamente usamos class para darle vida al html y de paso hacer el efecto hover al pasar el cursor.

El css seria:


Insertar CODE, HTML o PHP:
.container { //este le da diseño al div que seria la imagen.
background: url(http://i.imgur.com/f72R2hx.png) no-repeat;
background-position: center;  width: 220px;  height: 200px;  margin: 0 auto;}

.object { //posiciona en el lugar donde deseaba que se mostrase y al mismo tiempo hace que sin pasar el cursor este no se muestre.
display: none;    margin-top: 30%;}

.container:hover .object { // hace que al pasar el cursor se muestre.    
display: block;}

.text{ //es para darle un poco de diseño a Leer más.    
white-space: nowrap;    
background: #fff;}

Y listo ya se tendría el objetivo realizado.

Aquí dejo una demostración: DEMO

y menciono a [MENTION=131303]fabrihd[/MENTION] que para él fue creado.😛8:
 
Gracias genio !!!!!!!!!!!!!!!!!!! voy a intentarlo !!!!!!!!!!! :encouragement:
 
Se ve bien solo que no abre nada, jajaj es solo para imagenes 😎 me da un par de ideas 😉
buen tutorial
 
Está muy bueno, me has dado una idea con esto, mil gracias!
 
Atrás
Arriba