Cikkajánló
Általában a lapozást is mindenki bővítménnyel oldja meg. Viszont én amit lehet szeretek kóddal megoldani, mert a túl sok bővítmény lassíthatja a honlapot. Plusz kevesebb macera, mert nincs mit
Ezekben a hetekben összegyűlt egy csomó .png képem, amiket ma feltöltöttem a galériába. Ezek az albumok frissültek:   Amanda Seyfried – új album 20db Beyonce – 8 darab Demi
Már jó sokan érdeklődtetek, hogyan lehet a Coppermine Galériában lévő legfrissebb képeket megjeleníteni a WordPress-ben. Azt javaslom, hogy inkább ezt a verziót használjátok a WordPress-es bővítmény helyett, mert ha
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é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
1 028 megtekintés

Hozzászólások