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
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
81 napja
112 néző

WordPress themes

WordPress themes
82 napja
114 néző

G-Portál themes

G-Portál themes
82 napja
67 néző

Tumblr themes

Tumblr themes
82 napja
101 néző

Képeffekt elit cseréknél 15.

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</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">Demi</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</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</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</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:20px;
border: 1px solid #E8CDCA !important;
position:absolute;
top:32px;
left:5px;
-webkit-transform: scale(1);
transform: scale(1);
background-color: #E8CDCA;
opacity: .8;
}
.elit:hover .linkbox {
-webkit-transform: scale(0);
transform: scale(0);
}
.elit a:link img, .elit a:visited img {
border: 1px solid #E8CDCA;
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: 2px; /* 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 #6B3630;
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>


833 megtekintés

Hozzászólások