Magyarázat:

Kódja:

<style type="text/css">

#fluoresce {height: 320px; width: 460px; position: relative; overflow: hidden; border: 10px solid #fff; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); background: url(http://i.imgur.com/qG4Q3og.png)}

.fluoresce1a {height: 15px; line-height: 15px; font-family: arial; background: white; color: black; width: 200px; transform: skewY(-7deg); -webkit-transform: skewY(-7deg); -moz-transform: skewY(-7deg); position: absolute; font-size: 10px; text-transform: uppercase; letter-spacing: 3px;}

.fluoresce1a:nth-child(2) {top: 192px; left: 180px}

#fluoresce .fluoresce1a:nth-child(1) {left: 90px; -webkit-transition: 0.7s ease-in-out 0.5s; -moz-transition: 0.7s ease-in-out 0.5s; transition: 0.7s ease-in-out 0.5s;top: 105px;}

#fluoresce:hover .fluoresce1a:nth-child(1) {left: -200px; top: 140px; -webkit-transition: 0.7s ease-in-out; -moz-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out;}

#fluoresce .fluoresce1a:nth-child(2) {left: 180px; -webkit-transition: 0.7s ease-in-out 0.5s; -moz-transition: 0.7s ease-in-out 0.5s; transition: 0.7s ease-in-out 0.5s;top: 192px;}

#fluoresce:hover .fluoresce1a:nth-child(2) {left: 460px; top: 152px; -webkit-transition: 0.7s ease-in-out}

.fluoresce1b {font-family: fjalla one; text-transform: uppercase; position: absolute; transform: skewY(-7deg); -webkit-transform: skewY(-7deg); -moz-transform: skewY(-7deg); font-size: 40px; position: absolute;}

.fluoresce1b:nth-child(3) {color: #bbec81;  left: 100px}

.fluoresce1b:nth-child(4) {color: #ecb881; left: 160px}

#fluoresce .fluoresce1b:nth-child(3) {top: 134px; -webkit-transition: 0.5s ease-in-out 0.6s; -moz-transition: 0.5s ease-in-out 0.6s; transition: 0.5s ease-in-out 0.6s; }

#fluoresce:hover .fluoresce1b:nth-child(3) {top: -78px; -webkit-transition: 0.5s ease-in-out 0.5s; -moz-transition: 0.5s ease-in-out 0.5s; transition: 0.5s ease-in-out 0.5s; }

#fluoresce .fluoresce1b:nth-child(4) {top: 165px; -webkit-transition: 0.5s ease-in-out 0.6s; -moz-transition: 0.5s ease-in-out 0.6s; transition: 0.5s ease-in-out 0.6s; }

#fluoresce:hover .fluoresce1b:nth-child(4) {top: 345px; -webkit-transition: 0.5s ease-in-out 0.5s; -moz-transition: 0.5s ease-in-out 0.5s; transition: 0.5s ease-in-out 0.5s; }

.fluoresce2a {height: 280px; width: 195px; border: 10px solid #fff; position: absolute; top: 10px; left: 10px; overflow: hidden; }

.fluoresce2b {height: 280px; width: 195px; border: 10px solid #fff; position: absolute; top: 10px; right: 10px; overflow: hidden}

.fluoresce3 {height: 270px; width: 185px; padding: 0px 5px; border-top: 5px solid #fff; border-bottom: 5px solid #fff; background: white; text-align: justify; font-family: arial; font-size: 11px; line-height: 13px; overflow: auto }

.fluoresce3::-webkit-scrollbar {width: 4px;}

.fluoresce3::-webkit-scrollbar-thumb {background: white; border: 1px solid #FF3DDC}

.fluoresce3::-webkit-scrollbar-track {background: #FF3DDC; border: 1px solid #fff}

.fluoresce2a .fluoresce3 b, .fluoresce2b .fluoresce3 b {font-family: fjalla one; color: #FF3DDC; font-size: 14px}

.fluoresce4 {height: 280px; width: 195px; position: absolute; top: 0px; background-size: auto 280px; background-positon: center}

.fluoresce2a .fluoresce4, .fluoresce2b .fluoresce4 {top: 0px; -webkit-transition: 0.7s ease-in; -moz-transition: 0.7s ease-in; transition: 0.7s ease-in;}

.fluoresce2a:hover .fluoresce4, .fluoresce2b:hover .fluoresce4 {top: -280px; -webkit-transition: 0.7s ease-in; -moz-transition: 0.7s ease-in; transition: 0.7s ease-in;}

.fluoresce5a {font-family: fjalla one; color: #fff; text-transform: uppercase; position: absolute; padding-bottom: 3px; width: 80%; left: 10%; text-align: center; bottom: 40px; border-bottom: 1px dotted #fff; font-size: 17px}

.fluoresce5b {height: 25px; background: transparent; position: absolute; bottom: 10px; width: 80%; left: 10%; padding-top: 5px; font-family: arial; color: #fff; font-weight: 700; text-transform: uppercase; line-height: 9px; font-size: 8px}

 

#fluoresce .fluoresce2a {left: -220px; -webkit-transition: 1s ease}

#fluoresce .fluoresce2b {right: -220px; -webkit-transition: 1s ease}

#fluoresce:hover .fluoresce2a {left: 10px; -webkit-transition: 1s ease 1s}

#fluoresce:hover .fluoresce2b {right: 10px; -webkit-transition: 1s ease 1s }</style>

<p>

&nbsp;</p>

<p>

<link href="http://fonts.googleapis.com/css?family=Fjalla+One|Lato:400,700" rel="stylesheet" type="text/css" />

</p>

<p>

&nbsp;</p>

<center>

<div id="fluoresce">

<div class="fluoresce1a">

gyors infók</div>

<div class="fluoresce1a">

kedvencünkről</div>

<div class="fluoresce1b">

SELENA GOMEZ</div>

<div class="fluoresce1b">

Sel, Selly</div>

<div class="fluoresce2a">

<div class="fluoresce4" style="background-image: url( K É P  U R  L C I M E )">

<div class="fluoresce5a">

SELENA GOMEZ</div>

<div class="fluoresce5b">

1992. július 22.</div>

</div>

<div class="fluoresce3">

<p>

Selena Gomez egy amerikai színész- és énekesnő. Az egykori Disney sztár a Wizards of Waverly Place-nak köszönheti sikereit, hiszen a 2007-es indulást követően vált mindenki számára ismertté. Énekesnőként is a sorozatban debütált, ő énekelte fel a betétdalt is. Később önálló zenei karrierbe is kezdett, majd a felnőtté válás útján több nagyszabású filmbe is beszállt. Legnagyobb filmjei a Monte Carlo, a Spring Breakers és Behaving Badly.</p>

</div>

</div>

<div class="fluoresce2b">

<div class="fluoresce4" style="background-image:url( K É P  U R  L C I M E)">

<div class="fluoresce5a">

Elérhetőségek:</div>

<div class="fluoresce5b">

xxx</div>

</div>

<div class="fluoresce3">

Hivatalos oldal: selenagomez.com Facebookarrow-10x10.png Selena Twitter: @selenagomez Instagram: @selenagomez Youtube: SelenaGomezVEVO / SelGomez Google+: Selena Gomez MySpace: selenagomez Keek: selenagomez iTunes: Selena Gomez</div>

</div>

</div>

</center>