Cikkajánló
Újabb project szövegdobozokkal bővült a lindadesign kínálata :) Próbálok azért egyszerűbbeket létrehozni, de mégis mutatós kinézetű dobozokat. A mostaniak is megint nagyon szuperek lettek szerintem. A kiemelt képen mind
Ez is egy olyan leírás, amit azért teszek fel az oldalra, mert már hangzott el kérdés róla. Hogyan lehet olyan modult készíteni, amiben minta is van? Például ez a
Egy újabb G-Portálos teljes kinézetet hoztam. Ígérem most már lassan abbahagyon a GP-s design-ok gyártását, csak hát már olyan régen nem hoztam a G-Portálra bármilyen kinézetet vagy CSS kódot,
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 10.

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: 180px; /* 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;
position:absolute;
top:6px;
left:6px;
-webkit-transform: scale(1);
transform: scale(1);
}
.elit:hover .linkbox {
-webkit-transform: scale(0);
transform: scale(0);
}
.elit a:link img, .elit a:visited img {
border: 1px solid #D1D1D1 !important;
border-radius:40px;
padding: 5px;
filter: alpha(opacity=50);
opacity: .5;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
}
.elit a:hover img {
-webkit-filter: blur(3px);
filter: blur(3px);
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: #000000 1px 0px 2px;
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
640 megtekintés

Hozzászólások