Kód + magyarázat

beaux-container : amiben a felső kép van, cserélhető, méretezhető, de vele egyidejűleg ha átméretezed át kell méretezned a fehér átlátszó dobozt is ami mozog ! 
beaux-ship : The tudors felirat és utána a dőlt betűs is így fog kinézni 
beaux-shipcont : A felugró fehér átltászó doboz és a szöveg ami benne van 
beaux-shipReply : pálmaleveles hátterű alsó dobozrész formázása 
beaux-shipNames : Natalie Dormer felirat lenn 
beaux-repRep : Vanity Fair interjú felirat lenn 

<link href="http://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet" type="text/css" />

<style type="text/css">

#beaux-container { width:270px; padding: 15px; height:160px; background-image:url(http://natalie-dormer.org/press/images/royalflush.jpg); margin:auto; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; overflow:hidden;}

.beaux-ship { font-family: Cutive Mono; text-align:right; color:#fff;  text-transform:uppercase; font-size:9px; letter-spacing:2px; padding:3px; border-right: 8px solid #fff; line-height:101%; margin-right:15px; margin-top:50px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}

.beaux-shipcont { text-shadow:none!important; width:220px; height:100px; padding:10px; background-color:rgba(255,255,255,0.8); text-align:justify; margin:auto; margin-top:400px;    -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; font-family:calibri; font-size:10px; line-height:100%; color:#191919; overflow:auto; }

#beaux-container:hover .beaux-ship { margin-top:20px; }

#beaux-container:hover .beaux-shipcont { margin-top:25px; } </style>

</p>

<div id="beaux-container">

<div class="beaux-ship">

THE TUDORS<br />

<i>2007-2010</i></div>

<div class="beaux-shipcont">

Ide írhatnál egy interjúrészletet pl és ha kattintanak akkor megjelenne a teljes cikk.</div>

</div>

<style type="text/css">

.beaux-shipReply { width:250px; padding:25px; background:url(https://s-media-cache-ak0.pinimg.com/736x/6d/b0/a5/6db0a52532b89d204db4ed4fb051c0ab.jpg); margin:auto; }

.beaux-shipNames { background:#131313; font-family: Cutive Mono; text-align:right; color:#33c369;  text-transform:uppercase; font-size:9px; letter-spacing:2px; padding:3px; border-right: 8px solid #fff; }

.beaux-repRep { text-shadow:none!important; font-family:calibri; color:#000; background-color:#fff; margin-top:15px; text-align:justify; padding:4px; line-height:100%; font-size:10px;}</style>

<div class="beaux-shipReply">

<div class="beaux-shipNames">

Natalie Dormer</div>

<div class="beaux-repRep">

Vanity Fair interjú</div>

</div>