Tartalom
FŐOLDAL

Ismertető doboz #2

2016.04.15. 19:03, Angelika

Meghoztam a második ismertető/tartalom tároló dobozkát. A kód része töményen van a vége felé, ezért kiemeltem azt ahova írnod kell. ha szín vagy méretbeli alakításokra lenne szükséged akkor magadnak kell rájönnöd, de szívesen segítek én is. (kérésre magyarázot is készítek hozzá!)

FIGYELEM!  a kód Gportálon nem nyújtja ugyan azt a látványt!

DEMÓ

 

 

<div class="pptemp pphov">
   <img style='width: 300px; height: auto;' src="kép url címe" />
   <div class="mask">
   <h2>FŐCÍM</h2>
   <h3>ALCÍM</h3>
   <p> DOBOZ TARTALMA</p>
   </div>
</div>
<link href='http://fonts.googleapis.com/css?family=Oswald|Roboto:300' rel='stylesheet' type='text/css'><style>#userlinks { z-index: 9999; } .pptemp { width: 300px; height: 400px; margin: 10px auto; border: 1px solid #887A8E; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background-color: #fff; } .pptemp .mask, .pptemp .content { width: 300px; height: 400px; position: absolute; overflow: hidden; top: 0; left: 0; } .pptemp img { display: block; position: relative; max-width: 300px; } .pptemp h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 24px; line-height:26px; padding: 10px; margin: 20px 0 0 0; font-family: "Oswald", sans-serif; } .pptemp h3 { text-transform: uppercase; color: #666; font-weight: normal; text-align: center; position: relative; font-size: 11px; padding: 10px; margin: 0 !important; border-bottom: 0px !important; font-family: "Oswald", sans-serif; } .pptemp p { font-family: "Roboto", sans-serif; font-size: 11px; position: relative; color: #555; padding: 7px 20px; text-align: justify; margin: 0; letter-spacing: 0.03em; word-spacing: 0.02em; } .pptemp a { color: #cecece; text-decoration: none; font-family: "Oswald"; text-transform: uppercase; font-size: 9px; } .pptemp a:hover { color: #FFFFFF; } .pphov img { transform: scaleY(1); transition: all 0.7s ease-in-out; } .pphov .mask { background-color: #9A86A3; transition: all 0.5s linear; opacity: 0; height: 400px; overflow-y: auto; }  .pphov h2, .pphov h3 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .pphov p { color: #333; opacity: 0; transform: scale(0); transition: all 0.5s linear; } .pphov a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .pphov:hover img { transform: scale(10); opacity: 0; } .pphov:hover .mask { opacity: 1; }   .pphov:hover h2, .pphov:hover h3, .pphov:hover p, .pphov:hover a.info { transform: scale(1); opacity: 1; } .zeddit { text-align: center; }</style>
Még nincs hozzászólás.
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Szeretnél egy jó receptet? Látogass el oldalamra, szeretettel várlak!    *****    Minõségi Homlokzati Hõszigetelés. Vállaljuk családi házak, lakások, nyaralók és egyéb épületek homlokzati szigetelését.    *****    Amway termék elérhetõ áron!Tudta, hogy az általános tisztítószer akár 333 felmosásra is alkalmas?Több info a weboldalon    *****    Florence Pugh magyar rajongói oldal. Ismerd meg és kövesd az angol színésznõ karrierj&#232;t!    *****    Fele királyságomat nektek adom, hisz csak rátok vár ez a mesebirodalom! - Új menüpont a Mesetárban! Nézz be te is!    *****    DMT Trip napló, versek, történetek, absztrakt agymenés:)    *****    Elindult a Játék határok nélkül blog! Részletes információ az összes adásról, melyben a magyarok játszottak + egyéb infó    *****    Florence Pugh Hungary - Ismerd meg az Oppenheimer és a Dûne 2. sztárját.    *****    Megnyílt az F-Zero Hungary! Ismerd meg a Nintendo legdinamikusabb versenyjáték-sorozatát! Folyamatosan bõvülõ tartalom.    *****    A Cheer Danshi!! nem futott nagyot, mégis érdemes egy esélyt adni neki. Olvass róla az Anime Odyssey blogban!    *****    A 1080° Avalanche egy méltatlanul figyelmen kívül hagyott játék, pedig a Nintendo egyik remekmûve. Olvass róla!    *****    Gundel Takács Gábor egy különleges könyvet adott ki, ahol kiváló sportolókkal a sport mélységébe nyerhetünk betekintést.    *****    21 napos életmódváltás program csatlakozz hozzánk még!Január 28-ig 10% kedvezménnyel plusz ajándékkal tudod megvásárolni    *****    Szeretne egy olyan általános tisztítószert ami 333 felmosásra is elegendõ? Szeretne ha csíkmentes lenne? Részletek itt!!    *****    Új játék érkezett a Mesetárba! Elõ a papírral, ollóval, és gyertek barkácsolni!    *****    Tisztítószerek a legjobb áron! Hatékonyság felsõfoka! 333 felmosásra elengedõ általános tisztítószer! Vásároljon még ma!    *****    Hayashibara Megumi és Okui Masami rajongói oldal! Albumok, dalszövegek, és sok más. Folyamatosan frissülõ tartalom.    *****    A legfrissebb hírek a Super Mario világából és a legteljesebb adatbázis a Mario játékokról.Folyamatosan bõvülõ tartalom.    *****    333 Felmosásra elegendõ! Szeretne gazdaságosan felmosni? Szeretne kiváló általános tisztítószert? Kiváló tisztítószerek!    *****    Ha tél, akkor téli sportok! De akár videojáték formájában is játszhatjuk õket. A 1080°Snowboarding egy kiváló példa erre