Cikkajánló
Készítettem egy újabb ingyenes .psd fejlécet, amit bárki letölthet és felhasználhat forrás megjelölésével természetesen. A fejléc innen tölthető le: PSD – Photoshop fejlécek   megnézem teljes nagyságban Kapcsolódó bejegyzések
Ez örök kérdés már évek óta sok mindenkitől, így azt hiszem itt az ideje, hogy külön bejegyzésben is leírjam, hol lehet a Coppermine galériában beállítani azt, hogy a főoldalon
Sziasztok :) A mai frissítésem kettő darab G-Portálos teljes kinézet kódolással és részletes leírással együtt. Az egyik témán Selena Gomez, a másikon pedig Emilia Clarke van. A témákat innen
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 11.

Képek kódja

 

<div id="elit">
<div class="elit">
<a href="/" target="_blank"><img src="IDE JÖN A KÉP URL CÍME" /></a>
<div class="linkbox">
<p class="text">Joseph Morgan</p>
</div>
</div>
<div class="elit">
<a href="/" target="_blank"><img src="IDE JÖN A KÉP URL CÍME" /></a>
<div class="linkbox">
<p class="text">Demetria Lovato</p>
</div>
</div>
<div class="elit">
<a href="/" target="_blank"><img src="IDE JÖN A KÉP URL CÍME" /></a>
<div class="linkbox">
<p class="text">Matthew Gode</p>
</div>
</div>
<div class="elit">
<a href="/" target="_blank"><img src="IDE JÖN A KÉP URL CÍME" /></a>
<div class="linkbox">
<p class="text">Ashley Tisdale</p>
</div>
</div>
</div>

 

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

 

<div class="elit">
<a href="/" target="_blank"><img src="IDE JÖN A KÉP URL CÍME" /></a>
<div class="linkbox">
<p class="text">Ashley Tisdale</p>
</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: 400px; /* a doboz szélessége, amiben a képek vannak */
height: 220px; /* a doboz magassága, amiben a képek vannak */
}
.elit {
float: left;
position:relative;
margin-left: 5px; /* a két ikon közötti távolság */
margin-top: 0px; /* két sor közötti távolság */
}
.elit .linkbox {
width:70px;
height:70px;
border: 1px solid #99D0D4 !important;
border-radius:40px;
position:absolute;
top:5px;
left:5px;
-webkit-transform: scale(1);
transform: scale(1);
background-color: #99D0D4;
opacity: .8;
}
.elit:hover .linkbox {
-webkit-transform: scale(0);
transform: scale(0);
}
.elit a:link img, .elit a:visited img {
border: 1px solid #99D0D4;
border-radius:40px;
padding: 5px;
filter: alpha(opacity=100);
opacity: 10;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
}
.elit a:hover img {
filter: alpha(opacity=100);
opacity: 10;
}
.text {
text-align: center; /* szöveg középen */
line-height: 14px;
padding-top: 20px; /* ennyivel dobja le a szöveget a tetejétől */
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
text-shadow: -1px 1px 3px #0B6676;
background: transparent !important;
font-weight: bold !important;
text-decoration: none !important;
z-index: 2;
}
.linkbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
a:hover {
background: transparent !important;
}
</style>

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

Hozzászólások