Staff en línea

[html]Tablilla con entrada hover en diagonal
Tema iniciado por y Añadir a favoritos

[html]Tablilla con entrada hover en diagonal 
el Dom Oct 18, 2015 3:10 pm
staff
[codebox]Consigue una tablilla con contenido oculto que entra en diagonal. Previa: aquí [/codebox]


Estilo base de la tabilla:
[hidecode]/*Estilos Base*/
Código:

.contenedor-img {
width: 300px;
height: 200px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
}
.contenedor-img .mascara,.contenedor-img .contenido {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
display: block;
position: relative;

}
.contenedor-img h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.9);
margin: 20px 0 0 0
}
.contenedor-img p {
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 10px;
text-align: center
}
.contenedor-img a.link {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #222;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
box-shadow: 0 0 5px #000
}
[/hidecode]

Añadimos el HTML.
[hidecode]
Código:

<div class="contenedor-img ejemplo-2">  
     <img src="test.jpg" />  
     <div class="mascara"></div>
     <div class="contenido">
         <h2>Ejemplo 2</h2>  
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
         <a href="#" class="link">Leer mas</a>  
     </div>
</div>
[/hidecode]


Y ahora el CSS para el hover.
[hidecode]
Código:

.ejemplo-2 img {
transition: all 0.2s ease-in;
}
.ejemplo-2 .mascara {
background-color: rgba(25,96,184, 0.8);
width: 300px;
padding: 60px;
height: 300px;
opacity: 1;
transform: translate(300px, 200px) rotate(45deg); /*Rotamos para dar efecto de diagonal y lo movemos por donde queremos que entre.*/
transition: all 0.5s ease-in-out;
}
.ejemplo-2 h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: translate(200px, -200px);/*Desplazamos el título arriba a la derecha*/
transition: all 0.3s ease-in-out;
}
.ejemplo-2 p {
transform: translate(-200px, 200px);/*Desplazamos la descripción abajo a la izquierda*/
transition: all 0.4s ease-in-out;
}
.ejemplo-2 a.link {
transform: translate(0px, 100px);/*Desplazamos el link para abajo*/
transition: all 0.3s 0.1s ease-in-out;
}

.ejemplo-2:hover .mascara {
opacity:1;
transform: translate(-96px, -120px) rotate(45deg);
}
.ejemplo-2:hover h2 {
transform: translate(0px,0px);
transition-delay: 0.3s;
}
.ejemplo-2:hover p {
transform: translate(0px,0px);
transition-delay: 0.4s;
}
.ejemplo-2:hover a.link {
transform: translate(0px,0px);
transition-delay: 0.5s;
}
[/hidecode]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
gracias pauu xoxo jeje
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6863


Puntos :

8959


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [html]Tablilla con entrada hover en diagonal 
el Sáb Oct 24, 2015 10:08 pm
staff
Esta muy bueno ese efecto de seguro le sera de utilidad a muchos...
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1585


Puntos :

2328


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

Re: [html]Tablilla con entrada hover en diagonal 
el Miér Oct 28, 2015 8:10 am
seve muy bien gracias boy a provarlo
rokitx
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://www.profilebrand.com/images/facebook-cover/4342-loading-90-percent-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

72


Puntos :

76


Me gusta :

4


ingreso :

18/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

gracias por el aporte
Ysamar
avatar

¿Que estoy pensando? :

jjp´j [table class=fecha_up][td]Se modifico:10/05/18 - 19:04 hrs. [/td][/table]


Banner en temas :

http://descargarimagenestiernas.com/wp-content/uploads/2015/07/imagenes-tiernas-con-frases-para-descargar-3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

68


Puntos :

78


Me gusta :

10


ingreso :

28/11/2015


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.