Képben megjelenő szöveg kód + Textúrák a hátterére

Aloha!Tudom,eltűntem,de hétköznap tilos géphez kerülnöm,de mivel nem volt házim,ezért gondoltam felnézek egy kicsit.Ti hogy birjátok a sulit?Én szószerint már hozzászoktam,de inkább nem is nagyon emlegetem.Hamarosan a Blogverseny benevezése lezárul,de még alkalmatok van jelentkezni ITT!Gondoltam hozok egy ilyen képes kódot!A kód  a  Kawaii Blog Design-ről származik!A textúrák forrása Deviantart,google..stb.!
Remélem hasznát veszitek a kódnak,és tetszenek a textúrák!

• 
  
  
  
  
  Szia!Üdv a honlapomon!:3

A kód:

<style type="text/css">

.cg-item {

 width: 100%;

 height: 100%;

 border-radius: 0%;

 position: relative;

 box-shadow: 0 1px 2px rgba(0,0,0,0.1);

}

.cg-info-wrap,

.cg-info{

 position: absolute;

 width: 180px;

 height: 180px;

 border-radius: 0%;

}

.cg-info-wrap {

 top: 20px;

 left: 20px;

 background: #fff;

 box-shadow:

  0 0 0 20px rgba(255,255,255,0.2),

  inset 0 0 3px rgba(115,114, 23, 0.8);

}

.cg-info > div {

 display: block;

 position: absolute;

 width: 100%;

 height: 100%;

 border-radius: 0%;

 background-position: center center;

 -webkit-backface-visibility: hidden;

}

.cg-info .cg-info-front {

 -webkit-transition: all 0.6s ease-in-out;

 -moz-transition: all 0.6s ease-in-out;

 -o-transition: all 0.6s ease-in-out;

 -ms-transition: all 0.6s ease-in-out;

 transition: all 0.6s ease-in-out;

}

.cg-info .cg-info-back {

 opacity: 0;

 background: #ccc;

 pointer-events: none;

 -webkit-transform: scale(1.5);

 -moz-transform: scale(1.5);

 -o-transform: scale(1.5);

 -ms-transform: scale(1.5);

 transform: scale(1.5);

 -webkit-transition: all 0.4s ease-in-out 0.2s;

 -moz-transition: all 0.4s ease-in-out 0.2s;

 -o-transition: all 0.4s ease-in-out 0.2s;

 -ms-transition: all 0.4s ease-in-out 0.2s;

 transition: all 0.4s ease-in-out 0.2s;

}

.cg-img-1 {

 background-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUiitnQHsr4-BvD9ASNxKDkTLGsQRjSPxXALBRcS02BQ4M3sLnRJEBzpmkJw6QClH8_E8di0Xty_shKXDzkQ6j48fxDX5Q47oUpZNlnTiRsce4o6jUQuwy5L51t6BfAMuyKBdzpbibLBw/s1600/5.png);

}   

.cg-info h3 {

 color: #fff;

 letter-spacing: 1px;

 font-size: 18px;

 margin: 0 15px;

 padding: 40px 0 0 0;

 height: 80px;

 font-family: Arial;

 text-shadow:

  0 0 1px #000,

  0 1px 2px rgba(0,0,0,0.3);

}

.cg-info p {

 color: #fff;

 padding: 10px 5px 0;

 font-style: italic;

 margin: 0 30px;

 font-size: 12px;

 border-top: 1px solid rgba(255,255,255,0.5);

}

.cg-info p a {

 display: block;

 color: #000;

 font-style: normal;

 font-weight: 700;

 font-size: 9px;

 letter-spacing: 1px;

 padding-top: 4px;

 font-family: 'Open Sans', Arial, sans-serif;

}

.cg-info p a:hover {

 color: #fff;

}

.cg-item:hover .cg-info-front {

 -webkit-transform: scale(0);

 -moz-transform: scale(0);

 -o-transform: scale(0);

 -ms-transform: scale(0);

 transform: scale(0);

 opacity: 0;

}

.cg-item:hover .cg-info-back {

 -webkit-transform: scale(1);

 -moz-transform: scale(1);

 -o-transform: scale(1);

 -ms-transform: scale(1);

 transform: scale(1);

 opacity: 1;

 pointer-events: auto;

}

.cg-grid {

 margin: 20px 0 0 0;

 padding: 0;

 list-style: none;

 display: block;

 text-align: center;

 width: 100%;

}

.cg-grid:after,

.cg-item:before {

 content: '';

    display: table;

}

.cg-grid:after {

 clear: both;

}

.cg-grid li {

 width: 220px;

 height: 220px;

 display: inline-block;

 margin: 20px;

}  

</style>

<br />

<ul class="cg-grid">

<li>

      <div class="cg-item cg-img-1">

<div class="cg-info-wrap">

<div class="cg-info">

<div class="cg-info-front cg-img-1">

</div>

<div class="cg-info-back">

<br />

<br />

<br />

<br />

<br />

Szia!Üdv a honlapomon! <br />

<br /></div>

</div>

</div>

</div>

</li>

</ul>

<br />

És most jöjjönek a textúrák:

Xoxo,