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ő

Egyedi elit csere effekt
605 megtekintés

A mai napra egy affiliates csere effektet készítettem, ami eléggé egyedi lett. A neten találtam egy képeffekt demót és azt átvariáltam, hogy elit csere effekt lehessen belőle. Nekem ez a verzió nagyon tetszik. Egy kis button kúszik le a kép közepére, amire ha rákattintunk, akkor megnyílik a cserénk oldala. G-portálon is teljesen és tökéletesen működik a kód. Ott is tesztelve lett.

 

Joseph Morgan
Matthew Gode
Norman Reedus
Ian Somerhalder

 

Selena Gomez
Miley Cyrus
Ashley Tisdale
Demi Lovato

 

Ez lenne a HTM kódja
Ide én most csak egy darab kép kódját illesztem be, mert különben nagyon hosszú lenne a kód. Kiemeltem benne, hogy mely részt kell másolgatni, hogy minden elit kép megjelenjen. Sortöréshez a <br /> tagot tegyétek be, mikor új sort hoztok létre. A kiemelt részt egymás alá kell másolni, vagyis a nem kiemelt DIV és sortörés fölé!!
 

<div class="item-box">
<div class="jm-item first">
<div class="jm-item-wrapper">

<div class="jm-item-image">

<img src="IDE JÖN A KÉP URL CÍME" /> <span class="jm-item-overlay"> </span>

<div class="jm-item-button">

<a href="HTTP://OLDAL LINK CÍME" target="_blank">Katt</a></div>

</div>

<div class="jm-item-title">

Joseph Morgan</div>

</div>

</div>

<br /> /* ezt új sornál */
</div>

 

CSS kód
Mindenhol jelöltem a fontos dolgokat. A többin csak akkor változtassatok, ha tudjátok mit csináltok ;)

 

<style type="text/css">
.item-box {
margin: 0 auto;
width: 360px; /* az egész szélessége */
}
.jm-item {
display: inline-block;
margin-bottom: 5px; /* ennyi hely van két sor között */
}
.jm-item-wrapper {
position: relative;
padding: 7px; /* kép keret vastagsága */
background: #E6E6E6; /* kép keret színe */
}
.jm-item-title { /* szöveg kinézete */
background-color: rgb(0, 0, 0, 0.6);
line-height: 11px;
font-weight: bold;
padding: 4px;
text-transform: uppercase;
font-family: Calibri;
color: #FFFFFF;
font-size: 11px;
text-align: center; /* ezzel lesz szöveg középen */
width: 77px; /* szöveg háttér szélessége */
position: absolute;
left: 0px;
bottom: 0px;
}
.jm-item-overlay { /* ha ráviszed az egeret kép színe */
background-color: rgb(0, 0, 0, 0.9);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
.jm-item-wrapper:hover .jm-item-overlay { /* ha ráviszed az egeret kép átlátszósága */
opacity: 0.3;
}
.jm-item-button {
height: 50px;
width: 50px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -23px;
}
.jm-item-button a { /* KATT button kinézete */
border-radius: 50%;
-webkit-border-radius: 50%;
background: #FF6B0E;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
color: #FFFFFF !important;
font-size: 15px;
line-height: 50px;
-webkit-transition: all 0.2s ease-in 0s;
-moz-transition: all 0.2s ease-in 0s;
-o-transition: all 0.2s ease-in 0s;
transition: all 0.2s ease-in 0s;
text-decoration: none !important;
display: block;
}
.jm-item-button a:hover { /* KATT button színe, ha ráviszed az egeret */
background: #3b3b3b;
}
.first .jm-item-button {
-webkit-transition: all 0.5s ease-in 0.5s;
-moz-transition: all 0.5s ease-in 0.5s;
-o-transition: all 0.5s ease-in 0.5s;
transition: all 0.5s ease-in 0.5s;
top: -50px;
}
.first .jm-item-wrapper:hover .jm-item-button {
top: 20%;
}
.jm-item-image {
position: relative;
overflow: hidden;
}
.jm-item-image img {
display: block;
}
</style>

 

Forrás: LINK




Előző, következő cikk



Sziasztok! Készítettem egy Emma Roberts-es G-Portálos témát. Furcsa, de Emmával még nem készítettem kinézetet. Nem is értem miért nem, mikor nagyon kedvelem őt, akárcsak a nagynénjét is. Le sem tagadhatnák azt, hogy rokonok Julia Roberts-el. A téma ingyenesen felhasználható

Régebben többen kérdeztétek, hogyan lehet megoldani azt, hogy a szöveg nem, de a képek vagy videók viszont végigérnek a modulban. Kicsit összetett a megvalósítása, de ha értitek a CSS és némi HTML kódolást, akkor simán megoldható a dolog. Nekem

 



Hozzászólások