FuckinWay Gportál -#FW-DESIGN :: Gondolkodj, higgy, álmodj és merj!

Ajánló:)

welcome

Szia! Üdv az oldalon. Az oldal az én hobbi oldalam, ezért is a legtöbb friss szinte mindig hétvégére várható az iskola miatt és az amelletti töménytelen elfoglaltságom miatt, ezért sincs hétköznaponként sok friss, csak ha időm van rá. Érezd jól magad, kommentálj a csetbe, akármi. ;) Frank

Gyorslinkek: Login RSS Xat Chat

chat

partner oldalak

Azok az oldalak, melyeket rendszeresen olvasok. Bátran jelentkezhettek, bárkivel szívesen cserélek. :)

Régi Csere oldalak:
A régi cseréket levettem, sokan le is vettetek, bezártatok, így a csere kérés újra indult. Ha nem látod kint magad és cserénk van akkor kérlek jelezd! Bocsi! :(

Lekerültél? Olvasd el ezt.

Kaphatok egy Lájkot?:)

Archívum

Friss bejegyzések

Boldog Új Évet! :)

2018.12.31. 14:52

Karácsonyi ikonszettek

2018.12.08. 16:58

Közelednek az ünnepek!:)

2018.11.30. 14:48

Újra itt vagyok!!

2018.03.04. 20:30

Újra itt vagyok!!

2018.03.04. 20:24

Ugrás a blogra

Friss hozzászólások

Daisy: Szia, én nem rég találtam rád, és először megörültem, hogy e…

nikkii: CSS-ben nincs // kommentelés ;) 2016.12.28 18:52Liliana&bdq…

Liliana: Nekem hibátlan lett. :) Annyit azért hozzátennnék, hogy a ko…

Virág: Szia.Örülök hogy viszatértél ebben a jó kis csapatba.Kelleme…

xXx: 6 jó válasz, 4 hiba. Pedig ez még csak az eleje. Van mit gya…

Archívum

információ

Az oldal szerkesztője: Frank
A css-t, designt készítette: Frank
Az oldal nyitott: 2009.03.12
Az oldalt ebben a témában ettől a dátumtól kezdve keztdtem el szerkeszteni: 2012.02.10.
Az oldal témája: html, css, design stb..
A szerkesztő email címe: [email protected]

Régebbi frissítések

Az oldalon jelenleg 47 darab css kód leírás, 7 db html leírás, 8 db javascript, 2 yquery, 1 php és 11 darab egyéb leírás található.
A képre kattintva megtalálod az oldal Facebook oldalát. Érdemes belájkolni, mert néha oda is felkerül 1-2 grafika. ;)

Szavazás


Várod az ünnepeket?
Igen, erre várok egész évben! (144 / 67%)

Semleges (44 / 20%)

Nem szeretem... (27 / 13%)

Szavazatok száma: 215

Létrehozás időpontja:

2013-12-01 14:19:42

Szavazás lezárva:

2015-05-31 17:09:08

Lezárt szavazások

Css kód leirások

Css kód leirások : Kép alatt lecsúszó panel

Kép alatt lecsúszó panel

2013.05.10. 15:20

Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged.

HTML kód:

<div class="imagepluscontainer" style="width:280px; height:230px; z-index:2">

<img src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1345374365_55.png" />

<div class="desc">

Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged. Ide jön a szöveged.

</div>

</div>

<br />

</div>

CSS kód:

<style>

.imagepluscontainer{

position: relative;

z-index: 1;

}

.imagepluscontainer img{

position: relative;

z-index: 2;

-moz-transition: all 0.5s ease;

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.imagepluscontainer:hover img{

-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

-moz-transform: scale(1.05, 1.05);

-webkit-transform: scale(1.05, 1.05);

-ms-transform: scale(1.05, 1.05);

-o-transform: scale(1.05, 1.05);

transform: scale(1.05, 1.05);

}

.imagepluscontainer div.desc{

position: absolute;

width: 90%;

z-index: 1;

bottom: 0;

left: 5px;

padding: 8px;

background: rgba(0, 0, 0, 0.8);

color: white;

-moz-border-radius: 0 0 8px 8px;

-webkit-border-radius: 0 0 8px 8px;

border-radius: 0 0 8px 8px;

opacity: 0; /* Set initial opacity to 0 */

-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

-moz-transition: all 0.5s ease 0.5s;

-webkit-transition: all 0.5s ease 0.5s;

-o-transition: all 0.5s ease 0.5s;

-ms-transition: all 0.5s ease 0.5s;

transition: all 0.5s ease 0.5s;

}

.imagepluscontainer div.desc a{

color: white;

}

.imagepluscontainer:hover div.desc{

-moz-transform: translate(0, 100%);

-webkit-transform: translate(0, 100%);

-ms-transform: translate(0, 100%);

-o-transform: translate(0, 100%);

transform: translate(0, 100%);

opacity:1; /* Reveal desc DIV fully */

}

.imagepluscontainer div.rightslide{

width: 150px;

top:15px;

right:0;

left:auto;

bottom:auto;

padding-left:15px;

-moz-border-radius: 0 8px 8px 0;

-webkit-border-radius: 0 8px 8px 0;

border-radius: 0 8px 8px 0;

}

.imagepluscontainer:hover div.rightslide{

-moz-transform: translate(100%, 0);

-webkit-transform: translate(100%, 0);

-ms-transform: translate(100%, 0);

-o-transform: translate(100%, 0);

transform: translate(100%, 0);

}

.imagepluscontainer div.leftslide{

width: 150px;

top:15px;

left:0;

bottom:auto;

padding-left:15px;

-moz-border-radius: 8px 0 0 8px;

-webkit-border-radius: 8px 0 0 8px;

border-radius: 8px 0 0 8px;

}

.imagepluscontainer:hover div.leftslide{

-moz-transform: translate(-100%, 0);

-webkit-transform: translate(-100%, 0);

-ms-transform: translate(-100%, 0);

-o-transform: translate(-100%, 0);

transform:translate(-100%, 0);

}

.imagepluscontainer div.upslide{

top:0;

bottom:auto;

padding-bottom:10px;

-moz-border-radius: 8px 8px 0 0;

-webkit-border-radius: 8px 8px 0 0;

border-radius: 8px 8px 0 0;

}

.imagepluscontainer:hover div.upslide{

-moz-transform: translate(0, -100%);

-webkit-transform: translate(0, -100%);

-ms-transform: translate(0, -100%);

-o-transform: translate(0, -100%);

transform:translate(0, -100%);

}

</style>