2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
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
Coppermine Gallery themes

Coppermine Gallery themes
284 napja
701 néző

WordPress themes

WordPress themes
285 napja
198 néző

G-Portál themes

G-Portál themes
285 napja
112 néző

Tumblr themes

Tumblr themes
285 napja
162 néző

Képeffekt elit cseréknél 9.

 

Képek kódja

 

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

 

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

 

<div class="elit">
<img src="IDE JÖN A KÉP URL CÍME" />
<div class="linkbox">
<p class="text"><a href="/" target="_blank">Ashley Tisdale</a></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; /* kép szélessége */
height:70px; /* kép magassága */
position:absolute;
top:6px;
left:6px;
-webkit-transform: scale(0);
transform: scale(0);
}
.elit:hover .linkbox {
-webkit-transform: scale(1);
transform: scale(1);
}
.elit img:hover {
-webkit-filter: blur(3px);
filter: blur(3px);
}
.elit img { /* kép kinézete */
border: 1px solid #E1E1E1;
border-radius:40px;
padding: 5px;
}
.text {
text-align: center; /* szöveg középen */
line-height: 14px; /* sorok közötti táv */
padding-top: 20px; /* ennyivel dobja le a szöveget a tetejétől */
}
.text a { /* szöveg kinézete */
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
text-shadow: #000000 0px 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;
}
</style>


805 megtekintés

Hozzászólások