fejléc efekt demó és kód

fejléc  effekt :

demó:

  •  





    Köszöntelek az oldalon! Ha hiszitek ha nem az oldal most lesz 11 éves (április 12.-én) s,ez idő alatt rengeteg minden történt,és remélem számotokra is csak jó dolog történt.Kevesen mondhatják el,hogy 11 év után is vannak látogatói vagy azt hogy megvan még az oldala.Hát én büszkén mondom,szeretem ezt csinálni és van is kedvem hozzá,úgyhogy még egy ideig lesz oldal,nem zár be!Az oldalt egy kicsit rendebe tettem mind design szempontjából mind tartalmilag,remélem tetszik nektek.Minden korosztálynak ajánlom.Ha véleményed van írj a Chat és a Vendégkönyvbe,vagy E-mailt némely menüt CSAK regisztrált felhasználó nézhet meg ehhez itt Regisztráció !Vagy csak ha nézelődni van kedved azt is szívesen veszem.Köszönöm azt a sok látogatást ,várlak titeket máskor is :)
     

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: 960px;
 height: 380px;
 border-radius: 0%;
}
 
.cg-info-wrap {
 top:20px;
 left: 20px;
 background: #ffffff;
 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: #ffffff;
 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://jegvirag.gportal.hu/portal/jegvirag/image/gallery/1647349837.jpg);
}   
 
 
.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: 980;
 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: 40px 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: 1000px;
 height:420px;
 display: inline-block;
 margin: 40px;
}</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">
&nbsp;</div>
<div class="cg-info-back">
<br />
<br />
<br />
<br />
<br />
Köszöntelek az oldalon!
Ha hiszitek ha nem az oldal most lesz 11  éves (április 12.-én) s,ez idő alatt rengeteg minden történt,és remélem számotokra is csak jó dolog történt.Kevesen mondhatják el,hogy 11 év után is vannak látogatói vagy azt hogy megvan még az oldala.Hát én büszkén mondom,szeretem ezt csinálni és van is kedvem hozzá,úgyhogy még egy ideig lesz oldal,nem zár be!Az oldalt egy kicsit rendebe tettem mind design szempontjából mind tartalmilag,remélem tetszik nektek.Minden korosztálynak ajánlom.Ha véleményed van írj a <a href="//jegvirag.gportal.hu/gindex.php?pg=36628088">Chat</a> és a <a href="http://users2.smartgb.com/g/g.php?a=s&amp;i=g26-33486-46">Vendégkönyv</a>be,vagy <a href="mailto:[email protected]">E-mail</a>t némely menüt CSAK regisztrált felhasználó nézhet meg ehhez itt Regisztráció !Vagy csak ha nézelődni van kedved azt is szívesen veszem.Köszönöm azt a sok látogatást ,várlak titeket máskor is :)<br />
&nbsp;</div>
</div>
</div>
</div>
</li>
</ul>
<br />

 

 

 

 

 

 

 

(Ha valami nem megy szólj és segítek. [email protected] )

Ellenorítve:2017.04.11.Javítva:2022.03.14.

Copyright  © 2005-2022 Virág Design

 

 

 

 

 

Oldal információ
Portálépítés és portáldíszítés kezdőknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!
E-mail:[email protected]
Tárhely: gportal.hu
Kategoria:Portálépítés
Indulás:2005.04.12.
URL: jegvirag.gportal.hu
Facebook: Virág Design
Szerkeszto/Design:Virág
Virág1 , Jégvirág , Virgonc , Minta
 
Javascript,Html kód
 
Blog plusz
 
Kiemelt Menü
(Ha a képekre kattintasz akkor az elkövetkező ÜNNEPEKRE,ÉVSZAKOKRA JUTSZ el:( tavaszi menü , nyári menü , őszi menü ,  téli menüjévi menü ,  farsangi menü , valentin napi menü , anyák napi menü  , húsvéti menü , halloween menü , hálaadás menü , karácsonyi menü , születésnapi menü , gyerek napi menü  ) Amiben megtalálsz mindent amihez egy weboldalon szükség lehet.Kellemes weboldalszerkesztést!)
 
Belépés
Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 

 

Számláló
Indulás: 2005-04-12
 
Copyright  © 2005-2026 Virág Design /  www.jegvirag.gportal.hu /  [email protected]

 


Itachi Shinden második fejezet!! - ÚJ FEJEZET - Felkerült a könyv második harmada!! Konoha.hu - KATT!! KATT! KATT!! KATT    *****    MAO - Az elsõ számú magyar rajongói oldal Takahasi Rumiko (inuyasha alkotója) 2019 óta megjelenõ mangasorotatáról.    *****    Stellina Enna Drago - Sarai Mia - A múlt árnya -- > Molyon már elérhetõ    *****    Elsõ fantasy - thriller regényem Elõrendelhetõ. Bõvebbb információért kattints ide.    *****    Naruto rajongói oldal | konoha.hu | Látogass el konoha falujába | KONOHA.HU | KONOHA.HU | KONOHA.HU | KONOHA.HU | KONOHA    *****    farkasmetal.hu---haidekker kerítés---haiedekker kapu --farkasmetal.hu--lakatosmunka--haidekker kerítésmezõ--hullámrács    *****    Naruto rajongói oldal | konoha.hu | Látogass el konoha falujába | KONOHA.HU | KONOHA.HU | KONOHA.HU | KONOHA.HU | KONOHA    *****    Elindult a Substack oldalam! Elsõsorban anime és gaming témában olvashatsz cikkeket. Ha tetszik, iratkozz fel!    *****    15 éves a Nintendo 3DS! Emlékezzünk meg ezen fantasztikus kézikonzol történetérõl! Személyes és magyar vonatkozással!    *****    RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL    *****    PREKAMBRIUM //// A TUDÁS BIRODALMA///PREKAMBRIUM.GPORTAL.HU /// PREKAMBRIUM //// A TUDÁS BIRODALMA    *****    Naruto rajongói oldal | Könyv fordítások, fanficek | Nézzetek be és olvasgassatok! | Naruto rajongói oldal | KONOHA.HU    *****    Pont ITT Pont MOST! Pont NEKED! Már fejlesztés alatt is szebbnél szebb képek! Ha gondolod gyere less be!    *****    Itachi Shinden harmadi fejezet!! - ÚJ FEJEZET - Felkerült a könyv harmadik harmada!! Konoha.hu - KATT!! KATT! KATT! KATT    *****    MAGYAR HIMNUSZ GITÁRON    *****    KONOHA.HU | Naruto rajongói oldal! Olvass, tanulj, nézd az animét! 2026-ban is a KONOHA.HU-N | KONOHA.HU | KONOHA.HU | K    *****    RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL    *****    PREKAMBRIUM //// A TUDÁS BIRODALMA///PREKAMBRIUM.GPORTAL.HU /// PREKAMBRIUM //// A TUDÁS BIRODALMA    *****    RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL /// NE FÉLJ, CSAK HIGYJ! ///RELIGIO-PORTAL    *****    Naruto rajongói oldal | konoha.hu | KONOHA.HU | KONOHA.HU | KONOHA.HU | KONOHA.HU | KONOHA.HU | KONOHA.HU | KONOHA.HU |