Cikkajánló
Igaz már tegnap feltöltöttem a Bella Thorne .png képeket, de csak ma volt időm kiírni frissnek. A régebbiek mellé még 15 darab új kép készült el. A .png-ket a
Ez a tartalom regisztrációhoz kötött. Ha már regisztrált tag vagy, akkor a Bejelentkezés alatt tudsz belépni, ellenkező esetben regisztrálnod kell a tartalom megtekintéséhez.Regisztrált felhasználó belépéseFelhasználónévJelszó Emlékezzen rám  RegisztrációFelhasználónév*Email cím*E-mail cím újra*Honlap**Kötelezően
Joseph Morgan Matthew Goode Norman Reedus Ian Fansite Selena Gomez Miley Cyrus Ashley Tisdale Demi Lovato   Hoztam még ötféle képeffektet, amit nagyon jól lehet használni elit cseréknél (is).
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Kör alakú képeffekt szöveggel 2.
  •  

     

     

    Kör alakú képeffekt 2.
    Ide jöhet a szöveg.
    Linket, képet is lehet tenni.
    LindaDesign
    Minta szöveg. Minta szöveg.
    Minta szöveg. Minta szöveg.
    Minta szöveg. Minta szöveg.
    Minta szöveg. Minta szöveg.
    Minta szöveg. Minta szöveg.

 

Szövegdodoz kódja
 

<div class="cg-grid">
    <ul>
        <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 />
                            <u>Kör alakú képeffekt 2.</u><br />
                            Ide jöhet a szöveg.<br />
                            Linket, képet is lehet tenni.<br />
                            <a href="http://aranymeli.gportal.hu" target="_blank">LindaDesign</a><br />
                            Minta szöveg. Minta szöveg.<br />
                            Minta szöveg. Minta szöveg.<br />
                            Minta szöveg. Minta szöveg.<br />
                            Minta szöveg. Minta szöveg.<br />
                            Minta szöveg. Minta szöveg.</div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

 

CSS kód
a fontos beállítások megjelölésével
 

<style type="text/css">
.cg-info-wrap,
.cg-info{
   position: absolute;
   width: 200px; /* kicsi kör szélessége */
   height: 200px; /* kicsi kör magassága */
   border-radius: 50%;
}

 

.cg-info-wrap {
   top: 30px; /* kicsi kör helyzete fentről */
   left: 30px; /* kicsi kör helyzete balról */
   background: #ffffff; /* a kép és a szöveg váltakozásánál a háttér színe */
   box-shadow: 0 0 0 20px rgba(255,255,255,0.8); /* átlátszó keret színe, 0,8 pedig az átlátszóságot mutatja, 20px a keret szélessége */
}

.cg-info > div {
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 250px; /* kis kép kör alakú */
   background-position: center left; /* kis kép háttér pozíciója */
   -webkit-backface-visibility: hidden;
}

.cg-img-1 { /* a doboz háttérképe */
   background-image:  url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1402150912_27.jpg);
}

.cg-info-back { /* szöveg a dobozban */
   color: #ffffff;
   font-size: 12px;
   font-family: Arial;
   line-height: 15px;
}

.cg-info .cg-info-front {
   -webkit-transition: all 0.9s ease-in-out;
   -moz-transition: all 0.9s ease-in-out;
   -o-transition: all 0.9s ease-in-out;
   -ms-transition: all 0.9s ease-in-out;
   transition: all 0.9s ease-in-out;
}

.cg-info .cg-info-back {
   opacity: 0;
   background: #6A686B; /* háttér színe a szöveg alatt */
   -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-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-item {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   position: relative;
}

.cg-grid {
   list-style: none;
   display: block;
   text-align: center;
}

.cg-grid:after,
.cg-item:before {
 content: '';
    display: table;
}

.cg-grid:after {
   clear: both;
}

.cg-grid li {
   width: 300px; /* nagy kör szélessége */
   height: 300px; /* nagy kör magassága */
   display: inline-block;
}</style>

lindadesign Hozzászólások
843 megtekintés

Hozzászólások