Cikkajánló
Ez is egy olyan szövegdoboz, ha a képre viszed az egeret, akkor jelenik meg a benne lévő tartalom, ami lehet üdvözlő szöveg, Chat, Facebook doboz, stb. Annyi hátránya van
A napokban volt egy kevéske időm, így hoztam a listámról egy jó pár leírást és kódot. A listámon mindig van valami csak időm nem mindig van, hogy megosszam veletek.
Hoztam 15 darab Dakota Johnson .png képet, ha már a Szürke 50 árnyalatában Ő a főszereplőnő és a film ekkora siker lett. Igaz a filmet még nem láttam, de
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
Képeffekt elit cseréknél 14.

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; /* kép szélessége */
height:70px; /* kép magassága */
background: #ECCDD9; /* háttérszín */
border: 1px solid #ECCDD9 !important; /* egyezzen meg a háttér színével */
border-radius:40px; /* ettől kerek a háttér széle */
position:absolute;
top:5px; /* háttér középen */
left:5px; /* háttér középen */
opacity: .8;
}
.elit:hover .linkbox {
margin-top: 88px;
}
.elit a:link img, .elit a:visited img {
border: 1px solid #ECCDD9; /* keret a képek köré */
border-radius:40px;
padding: 5px; /* távolság keret és kép között */
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 {
border: 1px solid #5E334F; /* keret a képek köré */
filter: alpha(opacity=100);
opacity: 10;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.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 #BB83A7;
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
517 megtekintés

Hozzászólások