Cikkajánló
Egy pár aktuális sztár mellett szoktam hozni olyan .png képeket is, akik az én kedvenceim közé tartoznak. Ilyen Elizabeth Mitchell színésznő is. Szerettem anno a Lost sorozatban is, de
Hasznosabb kódokat már jó régen nem hoztam, így ma összedobtam három féle új script-et. A kódok előnézeti képei láthatóak a kiemelt képen. Kettő darab project dobozt készítettem. Ebből az
Végre volt időm és kedvem is, így az elmaradt leírásokat most bepótoltam. Elhoztam az eddigi összes leírást a Disqus hozzászólás rendszerhez, ami tervben volt. Most már bátran használhatjátok, mert
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 12.

Képek kódja

 

<div id="elit">
<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME);">
<div class="elitcsere">
<a href="/" target="_blank">Joseph Morgan</a></div>
</div>
<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME);">
<div class="elitcsere">
<a href="/" target="_blank">Demetria Lovato</a></div>
</div>
<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME);">
<div class="elitcsere">
<a href="/" target="_blank">Matthew Gode</a></div>
</div>
<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME);">
<div class="elitcsere">
<a href="/" target="_blank">Ashley Tisdale</a></div>
</div>
</div>

 

Egy sor kód
Ez egy darab kép kódja. Ezt a sort kell duplázgatni.

 

<div class="elit" style="background:url(IDE JÖN A KÉP URL CÍME);">
<div class="elitcsere">
<a href="/" target="_blank">Ashley Tisdale</a></div>
</div>

 

CSS kód
Ahova nem írtam magyarázatot, azokat az értékeket csak akkor változtassátok meg, ha értetek hozzá

 

<style>
#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: 180px; /* a doboz magassága, amiben a képek vannak */
}
.elit{
width:70px; /* az ikon szélessége */
height:70px; /* az ikon magassága */
float: left;
margin-left: 5px; /* a két ikon közötti távolság */
margin-top: 5px; /* két sor közötti távolság */
-webkit-transition: opacity 0.2s linear;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
border:1px solid #FF80C0; /* kép körül a keret színe */
border-radius:40px;
opacity: .8;
}
.elit a:link, .elit a:visited, elit a:hover { /* link kinézete a kép mögött */
font-family: Arial !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: bold !important;
font-style: italic;
text-transform: uppercase;
text-shadow: -1px 1px 3px #930049;
text-decoration: underline !important;
background: transparent !important;
}
.elitcsere{
height: 51px; /* mindig kisebb, mint az eredeti kép */
width: 70px; /* az elit kép szélessége */
background: #FF80C0; /* a bekúszó háttér színe */
text-align: center; /* szöveg középen */
line-height: 14px !important; /* sorok közötti táv */
margin-top:-25px; /* ettől kúszik le a fekete háttér */
padding-top: 17px; /* ennyivel dobja le a szöveget a tetejétől */
border:1px solid #FF80C0; /* általában egyezzen meg a háttér színével */
border-radius:40px; /* ettől lesz kerek a háttér */
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity: 0;
}
.elit:hover .elitcsere{
opacity: .8;
margin-top: 0px;
}
--></style>

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

Hozzászólások