2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

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>


863 megtekintés

Hozzászólások