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>