2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

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>


617 megtekintés

Hozzászólások