Cikkajánló
Elkészültem egy WordPress sablonnal, mert már olyan régen nem csináltam ilyet. A sablon ingyenes, bárki letöltheti, nem kell hozzá regisztrálni sem. A sablon kódokkal tartalmazza a következőket, ami azt
Elindítom azt a cikksorozatot, amiben külön-külön minden CSS kódrészről leírom, hogy micsoda, mire való és mi mindenre hathat a G-Portálon. Belinkelem mindegyik cikkhez azokat a G-Portálos leírásokat, amik már
Ma is egy G-Portálos teljes témát hoztam, ami felettébb egyszerű, legalábbis színvilágilag, de mégis annál egyedibbre sikerült :) Valahogy sosem sikerül tök egyszerű kinézetet hoznom. Mindig belecsempészek valami olyat,
Prémium téma | Ellie Goulding G-Portálos téma WordPress | Bejegyzés nem jelenik meg a főoldalon Gal Gadot G-Portálos téma Emilia Clarke G-Portálos téma Cole Sprouse G-Portálos téma
2017. augusztus. 24.
Egyedi elit csere effekt

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

Kapcsolódó bejegyzések

lindadesign
237 megtekintés

Előző, következő cikk

Emma Roberts G-Portálos téma

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ó

Kép vagy videó végigér a modulban

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