Cikkajánló
Ha már elsőnek leírtam a rendes táblázat készítését, gondoltam leírok még egy verziót, mikor nem táblázatban, hanem DIV kódba teszitek a tartalmat. Nekem személy szerint egyre megy. Kinézetre úgy
Egy újabb WordPress leírást hoztam. A WP-Polls szavazó bővítmény beállításáról és annak használatáról olvashatsz. A cikkben szó van a szavazó kinézetéről, magyarosításáról és arról is, hogyan tudod kódokkal az
Ez a cikk csak egy vélemény a tapasztalataim alapján. Mostanában elég sok Blogspotos oldallal találkozom. Vagyis hát az évek alatt belefutottam már párba és sajnos nem igazán van ezekről
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
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>

lindadesign Hozzászólások
643 megtekintés

Hozzászólások