2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
80 napja
111 néző

WordPress themes

WordPress themes
81 napja
114 néző

G-Portál themes

G-Portál themes
81 napja
67 néző

Tumblr themes

Tumblr themes
81 napja
101 néző

Képeffekt elit cseréknél 1.

 

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.

 

<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ép mögött */
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: 28px; /* ennyivel dobja le a szöveget a tetejétől */
background-color: #9B3596;
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-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.elit figure {
margin:0;
padding:0;
position:relative;
}
.elit figure img {
display:block;
position:relative;
}
.elit figure figcaption {
display:block;
position:absolute;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.elit figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.elit figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.elit figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
--></style>


1 626 megtekintés

Hozzászólások