Pixelated World │ Html & stuff

Haciéndole honor al nuevo sistema de menciones y hashtags.   He terminado esta portada. No utilicen esto fuera del foro, editen como quieran pero no quiten el crédito.  

Código:

<link href='http://fonts.googleapis.com/css?family=Varela Round|Grand+Hotel' rel='stylesheet' type='text/css'>
<center><div class="cuadro0"><div class="cuadro1"><div class="cuadro2">He was like James Deen;</div><div class="cuadro3">
<table cellpadding="0" cellspacing="0"><td><div class="cuadroa"> <div style="font-family:Varela Round; text-transform:uppercase; font-size: 16px; text-align: center; color: #fff; letter-spacing:2px; text-shadow: 1px 1px #222;">Ficha</div>
Titulo:
Autor:
Género:
Advertencias:
Adaptación:
Otras páginas: </div></td><td><div class="cuadroc">Un Resumen Aquí. </div></td></table><div class="cuadrob">Hashtags: #EstoEsUnHashTag, @UsuarioTal</div></div></div></div><div class="credito"><a href="http://onlywn.activoforo.com/u4943">Sterek</a></div></center>

<style>.cuadro0 { width: 502px; height: 332px; border: 15px solid transparent; outline: 1px solid #444} .cuadro1 { overflow: hidden; width: 500px; height: 330px; background-image: url(http://placehold.it/500x330); background-position: center left; border: 1px solid #555; overflow: hidden; position: relative } .cuadro1:hover .cuadro2 { margin-top: -500px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out } .cuadro1:hover .cuadro3 { left: 65px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out } .cuadro2 { text-shadow: 1px 1px #222; font-family:Grand Hotel; font-size:40px; color:#fb8279; line-height:102%; width: 480px; height: 250px; position: relative; top: 150px; text-align: center; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out } .cuadro3 {width: 340px; left: -500px; top: 30px; position: absolute; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out } .cuadroa {width: 150px; height: 180px; padding: 10px; overflow: auto; margin-bottom: 5px; font-family: Varela Round; font-size: 11px; color: #fff; line-height: 150%; background-color:rgba(51,51,51,0.5); border-left:2px solid #fb8279} .cuadrob {width: 362px; padding: 10px; margin-bottom: 5px; font-family: Varela Round; font-size: 11px; text-transform: capitalize; text-align: justify; color: #fff; line-height: 120%; background-color:rgba(51,51,51,0.5); border: 1px solid #fb8279} .cuadroc {width: 170px; height: 170px; overflow: auto; padding: 15px; margin-bottom: 5px; margin-left: 10px; background-color:rgba(51,51,51,0.5); font-family: Varela Round; font-size: 11px; color: #fafafa; text-align: justify; line-height:100%; border-right:1px solid #fb8279} .cuadroc::-webkit-scrollbar { width: 1px; height: 2px; } .cuadroc::-webkit-scrollbar-thumb {background: #fb8279;} .cuadroa::-webkit-scrollbar { width: 1px; height: 2px; } .cuadroa::-webkit-scrollbar-thumb {background: #fb8279;} .credito a {font-family: Varela Round; font-size: 8px; text-transform:uppercase; color: #333;}</style>

Esme:

¡Hola!: El elemento llamado "prueba 2" La posición inicial está a la izquierda: 75px y desde arriba: 100px.

Código:

.prueba2 {position: relative; top: 100px; left:75px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out }

Recuadro Azul: Llamado "prueba 1" tiene la propiedad de ocultar todo lo que sobrepase su tamaño: 220px; y tomando en cuenta el tamaño de la letra he colocado una cantidad que deje el ¡Hola! fuera de vista en hover.

Código:

.prueba1:hover .prueba2 {top: -200px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out; }

¿Cómo estás? Llamado "Prueba 3" su posición inicial es fuera del recuadro hacia la izquierda: -220px.

Código:

.prueba3 {position: relative; top:90px; left: -220px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out}

En hover hacia la izquierda: 20px.
 

Código:

.prueba1:hover .prueba3 { left: 20px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out }

Entonces también le he agregado tiempo de transición para que no haga los cambios de golpe. Uno para que salga de vista lentamente y otro para que vuelva a su posición inicial lentamente.

Transición: la transición son las partes de código que dice -moz-transition // -o-transition // -webkit-transition. Es esencia son lo mismo pero utilizo los tres para que funcione en diferentes buscadores (Chrome, Mozilla e Internet Explorer).

Este es el code completo:

Código:

<style> .prueba {width:225px; height: 225px; margin: auto; border: 15px solid transparent; outline: 1px solid #333;} .prueba1 {overflow: hidden; width: 220px; height: 220px; background-color: #a1c9c8;} .prueba2 {font-family: arial black; font-size: 25px; color: white; letter-spacing: -2px; position: relative; top: 100px; left:75px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out } .prueba1:hover .prueba2 {top: -200px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out;} .prueba1:hover .prueba3 { left: 20px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out } .prueba3 {font-family: arial black; font-size: 25px; color: #ff9999; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; letter-spacing: -2px; position: relative; top:90px; left: -220px; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out} </style>

<div class="prueba"><div class="prueba1"><div class="prueba2">¡Hola!</div><div class="prueba3">¿Cómo estás?</div>
</div></div>