Cikkajánló
Kitti azt hiszem jól megdolgoztattál :) de végül is megtaláltam, amit keresel.   A kóddal, amit itt találtok meg lehet változtatni annak a felugró kisablaknak a kinézetét, ami úgy
Hat hónap után végre kicsit felfrissítettem az oldalam kinézetét. Eltartott egy darabig mire megálmodtam, hogy hogyan nézzen ki. Eléggé egyszerűre sikeredett, de nekem tetszik. Ez által megismertem kettő darab
Készítettem tegnap egy újabb WordPress témát, csak tegnap már nem akartam kitenni, mert egy napra kettő friss bőven elég, így beállítottam az időzítőt ma reggel 10-re. A témákban a
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
Képeffekt elit cseréknél 5.

 

Képek kódja

 

<div id="elit">
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Joseph Morgan</a></figcaption></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Matthew Goode</a></figcaption></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Norman Reedus</a></figcaption></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Ian Fansite</figcaption></a></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Selena Gomez</figcaption></a></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Miley Cyrus Fansite</figcaption></a></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Ashley Tisdale</figcaption></a></figure></div>
<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Demi Lovato Fansite</figcaption></a></figure></div>
</div>

 

Simán csak ezt a kódsort kell ismételni, attól függően, hogy mennyi ikonotok van :) Az a href után a perjel helyére kell írni a link csere címét. Az img src után kell írni a képek címét.

 

<div class="elit"><figure><img src="ikon URL címe helye" alt="" />
<figcaption><a href="/">Joseph Morgan</a></figcaption></figure></div>

 

CSS kód

 

<style type="text/css">
#elit {
margin: 0px auto; /* ez marad. ettől lesz a modulban középen */
width: 308px; /* a doboz szélessége, amiben a képek vannak */
height: 220px; /* a doboz magassága, amiben a képek vannak */
}
.elit {
width:70px; /* az ikon szélessége */
height:100px; /* az ikon magassága */
float:left;
margin-left: 5px;
margin-top: 5px;
}
.elit a:link, elit a:hover { /* link kinézete a képen*/
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: bold;
}
.elit figure figcaption { /* háttere kinézete */
text-align: center !important;
padding-top: 40px; /* ennyivel dobja le a szöveget a tetejétől */
background-color: #000000;
line-height: 12px !important;
top:0;
left:0;
width:70px; /* szélesség ua., mint a képnél */
height:100px; /* magasság ua., mint a képnél */
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-transform:perspective(400px) rotateX(0deg);
-moz-transform:perspective(400px) rotateX(0deg);
transform:perspective(400px) rotateX(0deg);
display:block;
position:absolute;
opacity: 0;
}
.elit figure {
margin:0;
padding:0;
position:relative;
}
.elit figure img {
display:block;
position:relative;
}
.elit figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.elit figure:hover img,figure.hover img {
}
.elit figure:hover figcaption,figure.hover figcaption {
-webkit-transform:perspective(400px) rotateX(360deg);
-moz-transform:perspective(400px) rotateX(360deg);
transform:perspective(400px) rotateX(360deg);
opacity: 0.5;
}
--></style>

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

Hozzászólások