CSS-animáció, amikor az egérmutatót egy kép fölé viszi. Hozzon létre eredeti lebegő effektusokat a CSS3 segítségével. css lebegő effektus

Ha tetszik az effektus, akkor csak másolja a kész kódot, és használja!

Emelje fel weboldalát!

Különféle lebegési effektusok frissességet hozhatnak webhelye oldalain. Korábban minden hatás érdekében meg kellett küzdeni a javascript-tel, de ma, a CSS3 technológia megjelenése után, mindent meg lehet tenni a javascript használatát megkerülve.

A mai példák mindegyike új, modern böngészőkre van implementálva és optimalizálva, és minden bizonnyal működni fog azokban (például Mozilla vagy WebKit családi böngészőkben). Az IE-ben végzett munkáról nem tudjuk biztosítani, de a legújabb verziókban az effektusok biztosan úgy működnek, ahogy kell. De ne felejtsük el, hogy minden effektushoz vonzó visszaállítási lehetőséget készítettek arra az esetre, ha a böngésző még mindig nem támogatja a hatást.

01. Nagyítás

Demó: Megtekinteni

Ez a hatás nagyon egyszerűen megvalósítható, és többféleképpen is megvalósítható. Olyan módszert alkalmaztunk, ahol minden képhez egy margó paramétert adunk, majd az egérkurzor mozgatásakor ezt a paramétert eltávolítjuk. Tegyük fel, hogy a margó beállítása 15 képpontnál kezdődik, és lebegtetéskor 2 képpont lesz, amitől úgy tűnik, hogy a kép ugrál. Ezt a hatást csak szöveggel is használhatja, még akkor is, ha a hivatkozások függőlegesek, nem pedig vízszintesek.

Az átmenetet itt saját belátása szerint állíthatja be, és a hatás minden átmenet nélkül is vonzó lesz. Mi például egy kicsit simává varázsoltuk a hatást, amiről azt gondoltuk, hogy még élénkíti a hatást.

Bump Up CSS

Ex1 img(
keret: 5px tömör #ccc;
balra lebeg;
margó: 15 képpont
-webkit-átmenet: margó 0,5 mp-es könnyítés;
-moz-átmenet: margó 0,5 mp-es könnyítés;
-o-átmenet: margó 0,5 s könnyítés;
}

Ex1 img: lebeg (
margó felső: 2 képpont;
}
02. Stack & Grow

Demó: Megtekinteni

Ennek az effektusnak a szerzője láthatóan valamiféle lávalámpa hatást akart elérni, hiszen ha az egérrel a hivatkozások listája fölé viszed, minden kép lassan kitágul, majd visszatér eredeti méretéhez.

A megvalósításhoz itt 400x133 pixel méretű képeket használtunk. Ezután CSS segítségével 300x100 pixelre méretezték át, és lebegtetéskor kibővítették. Mivel a példában a teljes lista középre igazított, a képek új mérete a teljes igazítást megtörte. Ezt a problémát úgy lehet megoldani, hogy a negatív margókat a felnagyított képek szélességének felére állítja.

A Stack & Grow CSS-kódja

/*2. példa*/
#container (
szélesség: 300 képpont
margó: 0 auto;
}

#ex2 img(
magasság: 100 képpont;
szélesség: 300 képpont
margó: 15 képpont 0;
-webkit-átmenet: minden 1 egyszerű;
-moz-átmenet: minden 1-es könnyű;
-o-átmenet: minden 1-es könnyű;
}

#ex2 img: lebeg (
magasság: 133 képpont;
szélesség: 400 képpont
margó-bal: -50px;
}
03. Szöveg halványítása

Demó: Megtekinteni

Itt a szerző olyasmit akart létrehozni, mint egy javascript típusú esemény, amikor az egérmutatót egy elem fölé viszi, és a hatás megjelenik egy másikon. Itt a szöveg és a kép készült, majd egy külön balra igazított divbe került. Ezután a szín: átlátszó és a vonalmagasság: 0 képpont hozzáadásra került a div-hez. Ez lehetővé tette, hogy a szöveg a div tetejére kerüljön, és teljesen elrejthető legyen.

Ahhoz, hogy a szöveg újra megjelenjen, egyszerűen megváltoztatjuk a színt és a sor magasságát. Ha a kép fölé viszi az egérmutatót, a szöveg újra megjelenik. Nagyon szórakoztató és könnyű hatás.

Fade Text In Effect CSS Code

#ex3(
szélesség: 730 képpont
magasság: 133 képpont;
vonalmagasság: 0 képpont
szín: átlátszó
betűméret: 50 képpont;
font-család: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
betűsúly: 300
szöveg-átalakítás: nagybetűk;

}

#ex3:hover(
vonalmagasság: 133 képpont;
szín: #575858;
}

#ex3 img(
balra lebeg;
margó: 0 15 képpont;
}
04. Görbe fotó

Demó: Megtekinteni

Ez az effektus nagyon egyszerű, de miniatűr galériában remekül használható. Először létre kell hoznia egy rácsot a képekkel, majd el kell forgatnia a képeket, amikor föléjük viszi az egérmutatót, ami vonzó hatást kelt.

Rengeteg új CSS-értéket használhatunk itt, ezért érdemes megfontolni a tartalék opciót is. korai változatai böngészők. Galériánkban átmeneteket, transzformációkat, valamint blokkárnyékokat használunk, azonban az Ön kívánsága szerint. Az átalakítás a kép elforgatásáért, az átmenetek pedig a lágy és egyenletes hatásért.

Itt pszeudoválasztókat használhat.

CSS-kód a Crooked Photo számára

#ex4 (
szélesség: 800 képpont
margó: 0 auto;
}

#ex4 img(
margó: 20 képpont
keret: 5px tömör #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
-webkit-átmenet: minden 0,5 másodperces egyszerűsítés;
-moz-átmenet: minden 0,5 s könnyű;
-o-átmenet: minden 0,5 s könnyű;
}

#ex4 img: lebeg (
-webkit-transzformáció: forgatás (-7 fok);
-moz-transzformáció: forgatás(-7 fok);
-o-transzformáció: forgatás (-7 fok);
}
05. Fade In and Reflect

Demó: Megtekinteni

Ezt az effektust kicsit körülményes megvalósítani, ezért kicsit babrálnunk kellett vele, hogy működjön. Az alapértelmezett képpozíció enyhén átlátszó. Ezután, amikor a kép fölé viszi az egérmutatót, az átlátszóság szintje csökken, és a kép visszanyeri eredeti megjelenését, valamint enyhe ragyogást és tükröződést (csak WebKit családi böngészők esetén).

Sajnos a tükrözés nem éppen átmenet, így azonnal megjelenik, pedig a tartalom többi része lassítva jelenik meg.

Ha zavarban van a CSS-reflexiókkal kapcsolatban, ebben a cikkben többet megtudhat róla (David Walsh).

Fade In és Reflect CSS Code

#ex5 (
szélesség: 700 képpont
margó: 0 auto;
Minimális magasság: 300 képpont
}

#ex5 img(
margó: 25 képpont
átlátszatlanság: 0,8
keret: 10 képpont tömör #eee;

/*Átmenet*/
-webkit-átmenet: minden 0,5 s egyszerű;
-moz-átmenet: minden 0,5 s könnyű;
-o-átmenet: minden 0,5 s könnyű;

/*Visszaverődés*/
-webkit-box-reflect: 0px alatt -webkit-gradiens(lineáris, bal felső, bal alsó, from(átlátszó), color-stop(.7, átlátszó), to(rgba(0,0,0,0.1)) );
}

#ex5 img: lebeg (
átlátszatlanság: 1

/*Visszaverődés*/
-webkit-box-reflect: 0px alatt -webkit-gradiens(lineáris, bal felső, bal alsó, from(átlátszó), color-stop(.7, átlátszó), to(rgba(0,0,0,0.4)) );

/*Világít*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
}
Következtetés

Ennek az 5 példának elegendőnek kell lennie ahhoz, hogy inspiráljon valami saját készítésére. Ne feledje, hogy mindig kísérletezhet kész példákkal, majd meséljen róluk.

Ha más szemrevaló effektussal találkoztál valahol a neten, akkor kérlek, mondd el nekünk és a többi olvasónak.

• Fordítás

A CSS3 ereje óriási, és ebben az oktatóanyagban megtudhatja, hogyan használhatja kreatívan. CSS3 átmenetekkel fogunk létrehozni néhány egérmutató-effektust. Ha az egérmutatót egy miniatűr fölé viszi, megjelenik a bélyegképek leírása, mindegyik példához más stílust használva.

Felhívjuk figyelmét, hogy ezek a példák csak a CSS3 tulajdonságokat támogató modern böngészőkben működnek megfelelően.

HTML jelölés

A jelölés szerkezete nagyon egyszerű és intuitív. Hozzon létre egy tárolót, amely tartalmaz egy képet és minden egyéb információt, például címet, leírást és egyebeket.

Az osztály nézetű blokkba beszúrunk egy osztálymaszkot tartalmazó elemet, ami a CSS3 effektjeinkért lesz felelős, azon belül elhelyezzük a címet, leírást és a teljes kép linkjét. (Néhány példa esetén hozzá kell adnunk egy maszkot, például külön elemés csomagolja a leírást div-be a tartalomosztállyal.)

css

A jelölés létrehozása után elkészítjük a stílusainkat.

Mi telepítjük Általános szabályok stílusunkhoz, majd speciális osztályokat adunk hozzá a kívánt hatásokkal. Ebben a cikkben elhagyjuk a CSS-előtagokat különböző böngészők, de a forrásban láthatod őket.
.view (szélesség: 300px; magasság: 200px; margó: 10px; lebegés: balra; szegély: 10px tömör #fff; túlcsordulás: rejtett; pozíció: relatív; szöveg igazítása: középre; doboz-árnyék: 1px 1px 2px #e6e6e6; kurzor: alapértelmezett; háttér: #fff url(../images/bgimg.jpg) ismétlés nélküli center center ) .view .mask, .view .content (szélesség: 300px; magasság: 200px; pozíció: abszolút; túlcsordulás: rejtett ; felül: 0; balra: 0 ) .view img ( kijelző: blokk; pozíció: relatív ) .view h2 ( szövegátalakítás: nagybetűk; szín: #fff; szöveg igazítása: középre; pozíció: relatív; betűméret: 17px; kitöltés: 10px; háttér: rgba(0, 0, 0, 0,8); margó: 20px 0 0 0 ) .view p (betűcsalád: Georgia, serif; betűstílus: dőlt; betűméret: 12px; pozíció: relatív; szín: #fff; kitöltés: 10px 20px 20px; szövegigazítás: középre ) .view a.info (megjelenítés: inline-block; szövegdekoráció: nincs; kitöltés: 7px 14px; háttér: #000; szín : #fff; szövegátalakítás: nagybetűk; box-shadow: 0 0 1px #000 ) .view a.info:hover ( box-shadow: 0 0 5px #000 )
És most tíz hatást fogunk figyelembe venni.

1. példa

Adjunk hozzá egy speciális view-first osztályt az elemhez a nézet osztályával ehhez a hatáshoz. Speciális osztályt fogunk hozzáadni a nézetelem minden példányához (view-first, view-second, view-third stb.).

Az első példában csak néhány alapvető átmenetet fogunk használni egy szép lebegési hatás létrehozásához:
.view-first img ( átmenet: mind 0,2s lineáris; ) .view-first .mask ( átlátszatlanság: 0; háttérszín: rgba(219,127,8, 0,7); átmenet: minden 0,4 mp-es könnyű be-kimenet; ) .view-first h2 ( transzformáció: translateY(-100px); átlátszatlanság: 0; átmenet: mind 0,2s könnyű be-kimenet; ) .view-first p ( transzformáció: translateY(100px); átlátszatlanság: 0; átmenet: minden 0,2 s lineáris; ) .view-first a.info( átlátszatlanság: 0; átmenet: mind 0,2 s könnyű be-kimenet; )
És most a hatásunk legérdekesebb része. Amikor a kurzort a kép fölé mozgatjuk, a delay tulajdonság segítségével egyszerű animációt szimulálhatunk. A lebegtetéskor használt átmenet-késleltetés megváltoztatható a normál osztálytól eltérőre. Ebben a példában nem használtunk késleltetést a normál osztályban, de késleltetést adtunk a lebegtetéshez, amely egy kicsit késlelteti az átmenet hatását.
.view-first:hover img ( transzformáció: scale(1.1); ) .view-first:hover .mask ( opacitás: 1; ) .view-first:hover h2, .view-first:hover p, .view-first :hover a.info ( átlátszatlanság: 1; átalakítás: translateY(0px); ) .view-first:hover p ( átmeneti késleltetés: 0,1 s; ) .view-first:hover a.info (átmenet-késleltetés: 0,2 s ;)

2. példa

A második példában egy speciális nézet-második osztályt adunk hozzá, de a maszk osztályú elemet üresen hagyjuk, és a leírást a tartalomosztályt tartalmazó div-be csomagoljuk.

Itt a maszk osztálynak különféle attribútumai lesznek, különösen a transzformációs tulajdonságot fogjuk alkalmazni (translate and rotate). A cikkleírások áthelyezésre kerülnek, így együtt mozgathatjuk őket az egérmutatóval:
.view-second img ( átmenet: minden 0,2 s könnyű beépülés; ) .view-second .mask ( háttérszín: rgba(115,146,184, 0,7); szélesség: 300 képpont; kitöltés: 60 képpont; magasság: 300 képpont; átlátszatlanság: 0; transzformáció: lefordítás(265px, 145px) forgatás(45fok); átmenet: minden 0,2 s könnyű be-ki; ) .view-second h2 ( border-bottom: 1px solid rgba(0, 0, 0, 0.3); háttér: átlátszó; margó: 20px 40px 0px 40px; transzformáció: fordítás(200px, -200px); átmenet: mind 0,2 s könnyű be-be; ) .view-second p ( transzformáció: fordítás (-200px, 200px); átmenet: minden 0,2 s könnyű be-ki; ) .view-second a.info ( transzformáció: translate(0px, 100px); átmenet: mind 0,2 s 0,1 mp könnyű be-ki; )
Lebegési effektusunkhoz egy fordítási transzformációt használunk, hogy elemeinket a helyükre helyezzük. a maszk is forogni fog. A leírás elemei kis késéssel mozognak:
.view-second:hover .mask ( opacity:1; transform: translate(-80px, -125px) rotate(45deg); ) .view-second:hover h2 (transform: translate(0px,0px); átmeneti késleltetés: 0,3 s; ) .view-second:hover p ( transzformáció: fordítás(0px,0px); átmeneti-késleltetés: 0,4s; ) .view-second:hover a.info ( transzformáció: translate(0px,0px); átmeneti- késés: 0,5 s;)

3. példa

A harmadik példában a fordító és forgató transzformációkat fogjuk használni:
.view-third img ( átmenet: minden 0,2 mp-es könnyű beépíthetőség; ) .view-third .mask ( háttérszín: rgba(0,0,0,0,6); átlátszatlanság: 0; átalakítás: translate(460px, -100px ) forgatás (180 fok); átmenet: mind 0,2 s 0,4 s könnyű be-ki; ) .view-third h2( transzformáció: translateY(-100px); átmenet: minden 0,2 s könnyű be-ki; ) .view-third p ( transzformáció: translateX(300px) rotate(90deg); átmenet: mind 0,2 s könnyű be-kimenet ki ;)
azt egyszerű utasításokat Az alkalmazás lebeg. Most megfordítjuk az elemek leírását az átmeneti késleltetés megfelelő beállításával:
.view-third:hover .mask ( átlátszatlanság:1; átmeneti késleltetés: 0s; transzformáció: translate(0px, 0px); ) .view-third:hover h2 (transzformáció: translateY(0px); átmeneti késleltetés: 0,5 s ; ) .view-third:hover p ( transzformáció: translateX(0px) rotate(0deg); átmeneti késleltetés: 0,4 s; ) .view-third:hover a.info ( transzformáció: translateY(0px); átmeneti késleltetés: 0,3 mp;)

4. példa

A negyedik példában egyszerűen kicsinyítjük a képet, és elforgatással felnagyítjuk a tartalmat, mindezt egy léptékátalakításnak köszönhetően. A képstílusoknál az átmenet-késleltetést 0,2-re állítjuk, de a lebegtetéskor 0-ra változtatjuk. Ez lehetővé teszi, hogy az animáció azonnal elinduljon lebegve, de késleltesse, amikor a kurzor elhagyja.
.view-fourth img ( átmenet: mind 0.4s easy-in-out 0.2s; opacitás: 1; ) .view-fourth .mask ( háttérszín: rgba(0,0,0,0.8); átlátszatlanság: 0; transzformáció: skála(0) forgatás (-180 fok); átmenet: minden 0,4 másodperces behúzás; szegélysugár: 0px; ) .view-fourth h2( átlátszatlanság: 0; border-bottom: 1px solid rgba(0, 0, 0, 0,3); háttér: átlátszó; margó: 20 képpont 40 képpont 0 képpont 40 képpont; átmenet: mind 0,5 s könnyű be-ki; ) .view-fourth p ( átlátszatlanság: 0; átmenet: mind 0,5 s könnyű be-kimenet; ) .view-fourth a.info ( átlátszatlanság: 0; átmenet: minden 0,5 másodperces könnyű be-kimenet; )
Ezek az utasítások a hatás eléréséhez – a CSS3-mal bármit meg lehet tenni :).
.view-fourth:hover .mask ( átlátszatlanság: 1; transzformáció: scale(1) rotate(0deg); átmeneti-késleltetés: 0,2s; ) .view-fourth:hover img ( transzformáció: skála(0); átlátszatlanság: 0 ; átmeneti-késleltetés: 0s; ) .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info( átlátszatlanság: 1; átmeneti késleltetés: 0,5 s; )

5. példa

Ebben az ötödik példában a translate tulajdonságot az átmeneti-időzítés-könnyítés-kimenet funkcióval együtt használjuk a tartalom balra tolásához.
.view-fifth img ( átmenet: minden 0.3 s könnyű be-ki; ) .view-fifth .mask ( háttérszín: rgba(146,96,91,0.3); transzformáció: translateX(-300px); átlátszatlanság: 1; átmenet: minden 0,4 s könnyű be-ki; ) .view-fifth h2( háttér: rgba(255, 255, 255, 0,5); szín: #000; box-shadow: 0px 1px 3px rgba(159, 141) , 140, 0,5); ) .view-fifth p( opacitás: 0; szín: #333; átmenet: mind 0,2s lineáris; )
A lebegő effektus jobbra tolja a képet, a leírás pedig a bal oldalon jelenik meg, mintha eltolta volna a képet:
.view-fifth:hover .mask ( transzformáció: translateX(0px); ) .view-fifth:hover img ( transzformáció: translateX(300px); átmeneti-késleltetés: 0,1 s; ) .view-fifth:hover p( átlátszatlanság: 1; átmeneti késleltetés: 0,4 s; )

6. példa

Ebben a példában a leírást elöl jelenítjük meg, a képet kicsinyítjük eredeti méret(10-től 1-ig terjedő skála). A "további információ" gomb alul megjelenik (fordítás).
.view-sixth img ( átmenet: mind 0,4 s könnyű be-ki 0,5 s; ) s könnyű bemenet 0,4 s; ) .view-sixth h2( opacitás: 0; border-bottom: 1px solid rgba(0, 0, 0, 0,3); háttér: átlátszó; margó: 20px 40px 0px 40px; transzformáció: lépték (10); átmenet: mind 0,3 s könnyű be-ki 0,1 s; .view-hatodik p ( átlátszatlanság: 0; átalakítás: lépték (10); átmenet: minden 0,3 s könnyű be-ki 0,2 s; ) .view -sixth a.info ( átlátszatlanság: 0; transzformáció: translateY(100px); átmenet: minden 0,3 mp könnyű be-ki 0,1 s; )
A fordított átmenet késik, így simának tűnik:
.view-sixth:hover .mask ( átlátszatlanság:1; átmeneti késleltetés: 0s; ) .view-sixth:hover img (átmenet-késleltetés: 0s; ) .view-sixth:hover h2 ( átlátszatlanság: 1; átalakítás: skála (1); átmenet-késleltetés: 0,1 s; ) .view-sixth:hover p ( átlátszatlanság: 1; átalakítás: skála (1); átmeneti késleltetés: 0,2 s; ) .view-sixth:hover a.info ( átlátszatlanság :1; átalakítás: translateY(0px); átmeneti késleltetés: 0,3 s; )

7. példa

A hetedik példában az ötlet az, hogy elforgatjuk a képet a közepén, és elmozdítjuk. Ekkor megjelenik a leírás, ami mögötte elrejti a forgó képet.
.view-seventh img( átmenet: minden 0,5 mp-es könnyítés; átlátszatlanság: 1; ) .view-seventh .mask ( háttérszín: rgba(77,44,35,0,5); transzformáció: rotate(0deg) scale( 1); átlátszatlanság: 0; átmenet: minden 0,3 mp-es könnyítés; transzformáció: translateY(-200px) forte (180 fok); ) .view-seventh h2( transzformáció: translateY(-200px); átmenet: minden 0,2 s egyszerű in-out; .view-seventh p ( transzformáció: translateY(-200px); átmenet: mind 0.2s easy-in-out; ) .view-seventh a.info ( transzformáció: translateY(-200px); átmenet: minden 0,2 s könnyű be-kimenet; )
Lebegtetéskor késleltetést adunk az elemekhez egy leírással. Így láthatjuk a forgó képet, mielőtt a leírás elrejti a képet. A fordított átmenetben minden azonnal eltűnik, és látni fogjuk, hogy a kép az ellenkező irányba forog:
.view-seventh:hover img( transzformáció: forgatás(720 fok) scale(0); opacitás: 0; ) .view-seventh:hover .mask ( opacitás: 1; transzformáció: translateY(0px) rotate(0deg); átmeneti- késleltetés: 0,4 s; ) .view-seventh:hover h2 ( transzformáció: translateY(0px); átmeneti késleltetés: 0,7 s; ) .view-seventh:hover p ( transzformáció: translateY(0px); átmeneti késleltetés: 0,6 s ; ) .view-seventh:hover a.info ( transzformáció: translateY(0px); átmeneti késleltetés: 0,5 s; )

8. példa

A nyolcadik példában animációt fogunk használni, és újra létrehozzuk a visszapattanó hatást. A leírás alulról ereszkedik le, és az alsó szegélyről visszaverődik.
.view-nyolcadik .mask ( háttérszín: rgba(255, 255, 255, 0,7); felső: -200 képpont; átlátszatlanság: 0; átmenet: mind 0,3 s, könnyű kihúzás 0,5 s; ) .view-8th h2( transzformáció : translateY(-200px); átmenet: mind 0,2 s könnyű be-ki 0,1 s; .view-nyolcadik p ( szín: #333; transzformáció: translateY(-200px); átmenet: minden 0,2 s könnyű be-ki 0,2 s; ) .view-nyolcadik a.info ( transzformáció: translateY(-200px); átmenet: mind 0,2 s könnyű be-ki 0,3 s; )
Hozzáadunk egy animációt a maszk elemhez, és meghatározunk néhány késleltetési beállítást a leírási elemekhez:
.view-eightth:hover .mask ( átlátszatlanság: 1; felül: 0px; átmeneti késleltetés: 0s; animáció: bounceY 0,9s lineáris; ) .view-nyolcadik:hover h2 (transzformáció: translateY(0px); átmeneti késleltetés: 0,4 s; ) .view-eighth:hover p ( transzformáció: translateY(0px); átmeneti-késleltetés: 0,2 s; ) .view-eightth:hover a.info ( transzformáció: translateY(0px); átmeneti késleltetés: 0s; )
A tényleges visszapattanási effektus újbóli létrehozásához a translateY-t használjuk, mivel láthatja, hogy több képkocka is létrehozza ezt a hatást:
@keyframes bounceY ( 0% ( átalakítás: translateY(-205px);) 40% ( transzformáció: translateY(-100px);) 65% ( transzformáció: translateY(-52px);) 82% ( transzformáció: translateY(-25px)) ;) 92% (transzformáció: lefordításY(-12px);) 55%, 75%, 87%, 97%, 100% (transzformáció: translateY(0px);) )

9. példa

Ebben a példában két maszkelemet fogunk használni a jobb alsó és a bal felső sarokból történő eltoláshoz:

A maszkelemek eltérő fordítási és transzformációs eredetértékekkel rendelkeznek. Azt is jelezni fogjuk, hogy az egyik a felső szegélyhez, a másik pedig az alsó szegélyhez van igazítva:
.view-ninth .mask-1,.view-ninth .mask-2( háttérszín: rgba(0,0,0,0,5); magasság: 361px; szélesség: 361px; háttér: rgba(119,0,36 ,0,5); átlátszatlanság: 1; átmenet: minden 0,3 s, könnyű be-ki 0,6 s; ) .view-kilencedik .mask-1 ( balra: auto; jobbra: 0px; transzformáció: forgatás (56,5 fok) translateX(-180px) );transzformációs eredet: 100% 0%; ) .view-kilencedik .mask-2 (fent: automatikus; alul: 0px; átalakítás: forgatás (56,5 fok) translateX (180px); transzformációs eredet: 0% 100%; ) .view-ninth .content( háttér: rgba(0,0,0,0,9); magasság: 0px; átlátszatlanság: 0,5; szélesség: 361px; túlcsordulás: rejtett; transzformáció: forgatás(-33,5 fok) translate(-112px, 166 képpont); átalakítási eredet: 0% 100%; átmenet: mind 0,4 mp, könnyű be-ki 0,3 mp; ) .view-ninth h2( háttér: átlátszó; margó felső: 5 képpont; szegély-alsó: 1 képpont tömör rgba( 255,255,255,0,2); ) .view-ninth a.info(megjelenítés: nincs; )
Lebegtetéskor a tartalmat úgy jelenítjük meg, mintha a két középre csúsztatható maszkelem alól:
.view-ninth:hover .content( magasság: 120px; szélesség: 300px; átlátszatlanság: 0,9; top: 40px; transzformáció: rotate(0deg) translate(0px,0px); ) .view-ninth:hover .mask-1, .view-ninth:hover .mask-2( transfer-delay: 0s; ) .view-ninth:hover .mask-1( transform: rotate(56.5deg) translateX(1px); ) .view-ninth:hover .mask -2 ( átalakítás: forgatás (56,5 fok) lefordításX(-1px); )
Átmenet-késleltetést állítottunk be a maszkelemekhez, így ha fölé viszünk, az átmenet azonnali, de amikor az egér távozik, a késleltetés hosszabb lesz.

10. példa

Az utolsó példában kinagyítjuk a képet, majd elrejtjük, így a leírás előrébb kerül. Ezt a skálatranszformáció használatával és az átlátszósági szint beállításával tehetjük meg:
.view-tized img ( transzformáció: scaleY(1); átmenet: mind 0,7 s könnyű be-ki; ) 0,5 s lineáris; átlátszatlanság: 0; ) .view-tized h2( border-bottom: 1px solid rgba(0, 0, 0, 0,3); háttér: átlátszó; margó: 20px 40px 0px 40px; transzformáció: lépték(0); szín: #333; átmenet: mind 0,5 s lineáris; átlátszatlanság: 0; ) .view-tized p ( szín: #333; átlátszatlanság: 0; transzformáció: skála(0); átmenet: mind 0,5 s lineáris; ) .view- tizedik a.info ( átlátszatlanság: 0; transzformáció: skála (0); átmenet: mind 0,5 s lineáris; )
Lebegtetés közben egyszerűen méretezzük a képet, és miért rejtjük el úgy, hogy az átlátszóságát 0-ra csökkentjük:
.view-tized:hover img ( transzformáció: scale(10); átlátszatlanság: 0; ) .view-tized:hover .mask ( opacitás: 1; ) .view-tized:hover h2, .view-tized:hover p, .view-tized:hover a.info( transzformáció: scale(1); átlátszatlanság: 1; )

Következtetés

A CSS3 valóban nagy lehetőségeket rejt magában a gyönyörű effektusok létrehozásában. Remélhetőleg hamarosan elkerülhetjük a JavaScript használatát egyszerű effektusok létrehozására, és 100%-ban a CSS-re hagyatkozhatunk minden böngészőben.

Remélem, tetszeni fognak ezek a kísérletek, de mindenekelőtt remélem, hogy saját effektusok létrehozására ösztönöznek.

P.S. Ez a cikk logikus folytatása Mary Lou cikkének

Címkék: Címkék hozzáadása

Mindenekelőtt azoknak, akik nem teljesen vagy egyáltalán nincsenek benne a témában, röviden elmagyarázom, mi az a hover-. Ezek különféle effektusok (felugró feliratok, tippek, sima átmenetek, transzformáció, elforgatás, növelés, eltolás stb.), amelyeket a weboldal elemeire a rájuk mutató egérmutató segítségével alkalmaznak. Ezek megvalósíthatók különböző jQuery bővítmények segítségével és a pure -on is.
Ma az eredeti lebegő effektusok nagy választékát készítettem a CSS3-mal készített képekhez, JavaScript-könyvtárak nélkül. A hover effektusok tiszta CSS3-on való megvalósításának előnyeiről és hátrányairól nem fogok beszélni, ez egy másik téma, csak nézze meg a példákat, és ha szükséges, használja a kívántat a webhelyén. Az áttekintésben bemutatott összes effektus bemutatóval és részletes dokumentációval rendelkezik forráskódokkal. A kézikönyvek többnyire polgári nyelvűek, de minden többé-kevésbé intuitív.

Csak szeretném felhívni a figyelmet arra a tényre, hogy ezek a példák csak a CSS3 tulajdonságokat támogató modern böngészőkben működnek megfelelően.

Az összkép ne törjön meg, gépi fordítással nem torzítottam el az effektek nevét (néhány kivételével), az eredeti címeket úgy hagytam meg, ahogy a fejlesztő nevezte.

Nagyon érdekes lebegő hatás a képek miniatűrjein, vékony vonalak használatával a tervezésben és a tipográfiában. Számos különféle képaláírás-effektus, lágy és nem feltűnő 3D-s átalakítások, valamint sima pszeudoelem-átmenetek. Csak a modern böngészőkben működik.

Az iHover a tiszta CSS3 lebegő effektusok lenyűgöző gyűjteménye Bootstrap 3 támogatással. Scss CSS-re (fájlra) épül, változókkal könnyen módosítható. A kód moduláris, nem kell a teljes fájlt tartalmaznia. 30+ különböző effektus egy csomagban. Minden elég jól dokumentált, az effektusok nagyon könnyen használhatók. Mindössze annyit kell tennie, hogy megfelelően összeállítja a HTML-jelölést, és bele kell foglalnia a CSS-fájlt, hogy működjön.

Néhány egyszerű, de stílusos lebegési effektust hoz létre a képaláírásokhoz. Az ötlet az, hogy ha az egérmutatót a miniatűrök fölé viszi, akkor hatékonyan megjelenik a cím, a szerző neve és a hivatkozás gomb. Egyes effektusok 3D-s vizuális átalakításokat használnak.

Nagyon egyszerű átmeneti effektus, csengő és síp nélkül, teljesen kerek kép egy keretben, lebegésnél a fókusz változtatásával átalakul és ennyi.

CSS3 bélyegképekhez

A fejlesztő úgy helyezi el munkáját, mint egy olyan képgalériát, amely átmeneti effektusokkal rendelkezik, amikor a miniatűrökhöz megjegyzések (feliratok) jelennek meg. Erős támogatást hirdettek modern böngészők, beleértve az IE 9+ verziót is. Természetesen nehéz teljes értékű galériának nevezni, de az aláírások megjelenésének hatása meglehetősen érdekes.

Egy másik készlet css szabályokat, lenyűgöző lebegtetési effektusok létrehozásához a tökéletesen kerek miniatűrökön. A csomag 7 féle CSS3 átmenetet tartalmaz, nagyon részletes dokumentációt a beállításról és használatról. Az effektusokat minden modern böngésző támogatja.

Az indexképek elforgatása az egérmutatóval

A kerek miniatűrök elforgatásának egyszerű hatása, amikor az egérmutatót föléjük viszi, nagyjából ugyanezt láthatja a blogomon, a főoldalon található bejegyzések közleményeiben. Pár sor css kódban van megvalósítva.

Ha szó szerint fordítják: "Sex effect when hovering over". Persze ebben az effektusban nem valószínű, hogy valami ennyire szexit fogsz észrevenni, hacsak nincs vad fantáziád, de a hatás a maga nemében érdekes és érdemes odafigyelni rá.

Öt különböző effektus a képekhez, ha föléjük viszi az egérmutatót. Pop-up aláírások három változatban, függönyök az átlátszóság mértékének változtatásával és az elforgatással vízszintes mozgással.

4 Animációs effektusok típusai képaláírásokhoz, kizárólag a CSS3 segítségével. Különböző pozíciók a megjelenésnél és az átmeneti effektusoknál, egészen standard teljesítmény. Az animáció működésének megértéséhez vessen egy pillantást forrás bemutató oldalon, nem találtam külön dokumentációt.

Rácssoros bélyegképgalériák különféle felirat-megjelenéssel, elforgatással, elhalványítással, lebegtetéssel stb. A használatról és a konfigurációról meglehetősen szűkös a dokumentáció, de külön kívánsággal kitalálható.

Ez az effektus nem jelent semmi különöset, banális változást a képek fényerejében, kivéve, hogy animációs elemeket adnak hozzá. A megvalósítás részleteivel magának kell megbirkóznia a demó forráskódok lebontásával.

Egy másik 10 lebegtetési effektuskészlet a képekhez, a miniatűrök különféle módosításai lebegéssel, nagyítással, forgatással, elforgatással, sötétítéssel stb.

Különféle képkocka-animációs effektusok a képek körül, meglehetősen vonzónak tűnnek, részletes útmutató található a beállításhoz és a használathoz.

Eredeti CSS3 lebegtetési effektusok, amelyek segítségével a miniatűrök feliratai hatékonyan jelennek meg lebegtetéskor. A CSS-szabályok készlete 10 különböző effektust tartalmaz, amelyeket külön-külön használhat a különböző képekhez. Az effektusok valóban lenyűgözőek, különösen, ha figyelembe vesszük, hogy mindez a CSS3-mal készült. Részletes útmutató segít kitalálni, hogy mi az.

Az ötlet az, hogy egy SVG-t hozzunk létre, amely háttéralakzatként szolgál bizonyos szövegekhez, és más alakzattá változik, amikor az egérmutatót lebegteti. Így sokfélét lehet készíteni különböző lehetőségeket, a példában háromféle átmeneti hatás látható. Az SVG használatának előnye, hogy átméretezhetjük az űrlapot a szülőtároló méretéhez igazodva.

Csúszó képek

Ennek az effektusnak az a lényege, hogy a kép fel-le mozog, hogy megjelenjen a felirat. Ha a stílusparaméterekkel dolgozol, szerintem egész szép hatásokat lehet elérni, és alapból minden nagyon egyszerűnek tűnik.

Ezzel az effekttel minden egyszerű, a képek feliratai jobbra fent vagy balra lent csúsznak ki, áttetsző szalag formájában sötét háttér, css tulajdonságokkal minden nagyon könnyen átformálható.

Érdekes megoldás, hogy a miniatűrök elsötétített formában jelennek meg, ha föléjük viszi az egérmutatót, megjelennek a képek és világos háttéren felbukkan az aláírás.

A kép felirata a sarokból jelenik meg, és átlósan kiterjed a kép teljes területére.

Néhány további érdekes megoldás a képek miniatűrjei felugró feliratainak megvalósítására. Az online szerkesztőben kísérletezhet a lehetőségekkel, és lenyűgözőbb eredményeket érhet el.

Gyönyörű effektusok készlete, amikor az egérmutatót a miniatűrök fölé viszi, különféle megjelenési formák és képek feliratainak kialakítása. A vékony vonalak az enyhén sötétített háttérrel ellentétben könnyen olvasható információs blokkokat hoznak létre.

Bizarr formák és nagyítási effektusok a képek miniatűrjein megjelenő feliratok animált hatásával együtt.

Példa vizuális diaeffektus létrehozására terjedelmes képaláírások megjelenítéséhez csak CSS3 és HTML5 használatával.

6 Képaláírások

6 Változatok a felugró feliratok megjelenésére a CSS3 használatával lebegő képekhez. Részletes lecke a megvalósításról és a konfigurálásról, letölthető forráskódok.

És végül, hogy úgy mondjam, nem tehetem meg, hogy ne említsem meg a legegyszerűbb módszert, amellyel előugró feliratot hozhatunk létre egy miniatűrhöz CSS3 használatával.

Erről a módszerről beszéltem az egyik előző órámon:.

Szeretnéd a lehető leghamarabb hozzálátni a weboldalad építéséhez? Most már teljesen lehetséges! Azon egyszerű oknál fogva, hogy a TemplateMonster megjelent a piacon új szakasz Val vel . A gyűjtemény bővülni fog, de most már kereshet valami megfelelőt az online projektjéhez. Nincs más dolga, mint kiválasztani az ideális kulcsrakész megoldást, és a szükséges információk bemutatásával dolgozni. És ne felejtse el, hogy a sablon szövegét kézzel írták.

Minden tisztelettel, Andrew

Ez a bejegyzés különféle CSS-effektusokat és animációkat tartalmaz, amelyek hasznosak lehetnek a munkájában, és kiküszöböli a JavaScript folyamatos igénybevételének szükségességét. Talán a példák nem a legújabbak és a legszokatlanabbak, de véleményem szerint hasznosak.

1. CSS3 óra jQuery-vel

Ezt az órát az egyik fő CSS3 eszközzel - a forgatással és a jQuery könyvtár bevonásával hozták létre.

2. CSS analóg óra

Klasszikusabb, analóg óra. A webkit átmenet és a transzformációs CSS tulajdonság használatával jönnek létre. De ahhoz, hogy az idő megegyezzen a jelenlegivel, JavaScriptre van szükség.

3. Forgó 3D kocka

A kocka oldalai mentén történő forgatás és mozgás a szabványos "fel", "le", "balra" és "jobbra" billentyűkkel történik. Maga a 3D-s alakzat webkit-perspective, -webkit-transform és -webkit-transition használatával készült.

4. Több visszahúzható 3D kocka

Itt már több 3D kocka található, amelyek közvetlenül használják a CSS3-at, valamint az átalakítási és átmeneti tulajdonságokat. Ha a kocka fölé viszi az egérmutatót, az oldalra mozdul, felfedve az alakzat másik oldalán lévő szöveget.

5. Harmonika menü

Pure CSS harmonika menü effektus, ahol az egyes sorokra kattintva egy további ablak nyílik meg magának a lista törzsében. Natív animáció a böngészőkben bekapcsolva WebKit alapján.

6. CSS parallaxis görgetés

Ez egy animált automatikus parallaxis görgetés CSS használatával WebKit alapú átmenetek. Ha az egérmutatót a szövegmező fölé viszi, a háttérben lévő csillagok simán oldalra mozognak. A repülés hatása létrejön.

7. Mátrix

A "Matrix" című kultikus film az egyik legjobb tudományos-fantasztikus film. A példa bemutatja, hogyan lehet újra létrehozni ugyanazt a csodálatos animációt (fekete képernyő futó számokkal) a CSS3-ban.

8 dinamikus palaroid

Ebben a példában a Részletes leírás animált fényképek készítése CSS3 parancsok alapján. Ha rákattint egy képre, az kinagyítható és előrébb kerül.

9. Képméretezés

Ebben a példában a képek egyszerűen ránagyítanak az egérmutatóra. Egyszerű, de néha nagyon hasznos hatás.

10. JavaScript-hatások a CSS3-on

A JavaScript alternatívájaként a bejegyzés hét CSS3-effektust javasol: különböző blokkokat, amelyek forognak, eltűnnek, kiköltöznek, növekednek stb.

11. DJ Hero Virtual Records

A bejegyzés elmagyarázza, hogyan lehet pörgő rekordokat létrehozni. A forgási sebesség közvetlenül a képernyőn állítható.

12. Csúszó bakelit

A csúszó bakelitlemez effektus CSS3 és HTML átmenetekkel jön létre. Az ehhez hasonló animáció életre kelt egy weboldalt, eredetiséget ad egy szabványos albumborítónak stb.

13. Image Hover Effects

Ha egy kép fölé viszi az egérmutatót, az oldalra mozdulhat, foroghat, csökkenhet, négyzetből körbe átalakulhat, elmosódottá válhat... Egyszóval a képek minden lehetséges módon megváltoztatják tulajdonságaikat.

14. Forgó háromszög

Ha rákattint a háromszögre, az elkezd forogni.

15. Tér

Teljes hely, elfér a CSS-ben. Példaként szolgál a forgó rétegek átfedésére (figyelemreméltóbb a böngészőben való kicsinyítéskor).

16. Las Meninas 3D-ben

Egy érdekes CSS-effektus, amely Diego Velázquez híres Las Meninas-ját háromdimenzióssá teszi.

17. CSS Mac OS X rendszerhez

A képernyő alján a Mac OS X alapszintű ikonjai láthatók, amelyek az egérmutatóval megnagyobbodnak. A hatás dinamikát kölcsönöz az oldalnak.

18. Drop-In modálok

A CSS3 effektusok és a Drop-In Modals tulajdonságai segítenek a gyors, animált és egyszerű változtatások létrehozásában. modális ablakok.

19. Objektumok animálása

Az átalakulás változásai megjelenés elemet a böngészőben. Egy rakéta példáján látható, amely a képernyő egyik végétől a másikig "repül". Mozgatás, forgatás stb. eszközök használhatók.

20. Színes óra

A színes óra a jQuery-n és a CSS3-on alapul. A hasonló hatás jól jön, ha várunk valamilyen verseny, szavazás és hasonlók befejezésére.

21. Lightbox galéria jQuery-vel és CSS3-mal

Ez egy csodálatos galéria, amely lehetővé teszi a képek szelektív sorrendbe rendezését. Az interaktivitás érdekében a galéria jQuery-t, jQuery UI-t és jQuery bővítmény fantasybox. A Lightbox támogatja a képek címét és leírását, csoportosítja és automatikusan sorba rendezi a diákat.

22. "Elasztikus" előzetesek

A kép előnézetének nagyítása az egérmutatóval. Így a menüre kattintva arányosan növekszik.

23. Dinamikus kártyák

Ez a példa az dinamikus készlet HTML és CSS3 funkciókat használó kártyák.

24. Csúszó jQuery menü

A példában szereplő kicsúsztatható menü a CSS3 és a jQuery kombinációjával jött létre. Ha az egérmutatót a kép fölé viszi, megjelenik egy felugró ablak szöveggel.

25. CSS-lapok

A példában, ha az egeret a fülek fejlécére viszi, az alábbi lista megváltozik.

26. Halszem menü

A példa bemutatja, hogyan hozhat létre Halszem menüt CSS-animáció és SVG használatával. Mint további bónusz demo SVG használata az IMG címkében.

27. Legördülő menü

Ez a típus nagyon kényelmes navigációt biztosít a főmenüben, köszönhetően a CSS3 átmenetek használatának.

28. Címek a Star Warsból

Híres címek a Star Warsból. A HTML és a CSS elegendő lesz ezek futtatásához.

29. További halszem CSS-effektusok

Ismét ikonok, amelyek az egérmutatóval növekszenek.

30. Képkockánkénti animáció

Számos demonstrációs lehetőség áll rendelkezésre.
Az első példában a képre kell kattintani a keretek megváltoztatásához. Minden kattintás egy mozdulat. A keretek ismétlődnek, egy bizonyos hurok jön létre.
A második példában a keretek megváltoztatásához elegendő a kurzort a kép fölé mozgatni. Ennek megfelelően az animáció sebessége az egér mozgásának sebességétől függ.

31. Birodalmi gyalogló AT-AT

Újra itt a Star Wars – ez az AT-AT gyalogjáró CSS3-mal készült.

32. Egy másik CSS harmonika

Ha rákattint egy sorra, a táblázat kinyílik.

33. Egyszerű kihúzható menü

40. Legördülő menü
Egy egyszerű és szép CSS legördülő menü egy másik változata.

Ebben a leckében továbbra is a CSS-sel dolgozunk, gyönyörű hatást valósítunk meg, ha egy kép fölé viszünk, ahol az simán elsötétülve forog, a hátterén pedig körvonal és szövegcímek jelennek meg.

A CSS-effektus leírja a blokkok keretét az átalakításhoz

Töltse le az elkészített sablont, két fájlt tartalmaz, Index, amelyben a CSS csatlakozik. A CSS-ben a behúzásokat elvetették, a betűtípust beállították és csatlakoztatták a háttér kép. Magában az /img mappában két fájl található, egy háttér és egy kép példaként.

Leírjuk az oldalon megjelenítendő összes blokkot, és kitöltjük szöveges tartalommal.

Div.dws>div.blocImg>img+div.blocText>div.text>h2+p

css lebegő effektus

átmenet
transzformációs skála (x,y)
:hover::előtte::utána

Az alapvető képstílusok / css effektusok leírása

A blokknak fix szélességet és magasságot állítunk be egy képpel, és a túlcsordulás segítségével: rejtett , rajta kívül mindent elrejtünk, ami felesleges, kurzort adunk hozzá.

BlocImg ( szélesség: 600 képpont; magasság: 338 képpont; túlcsordulás: rejtett; kurzor: mutató; )

A kényelem érdekében a blokkot a képernyő közepére helyezzük.

Dws (pozíció: abszolút; felül: 50%; bal: 50%; transzformáció: fordítás (-50%, -50%); )

Ezután a kép szélességét 100%-ra tesszük, és fél másodperc alatt sima animációt akasztunk fel.

BlocImg img (szélesség: 100%; átmenet: .5s; )

Állítsa az elmosódásszűrőt 1 csúcsra. szűrő: blur(1px) és sötétítsük a hátteret, és ehhez a .blocImg osztályhoz adunk egy fekete hátteret, és fölé húzva magát a képet félig átlátszó opacitásúvá tesszük: .5; .

Dws:hover .blocImg img ( transzformáció: forgatás (-10 fok) skála (1,3); szűrő: blur (1px); átlátszatlanság: 0,5; )

Most kezdjük el a szöveg stílusát.

Kiadjuk a blokk szöveges tartalmát

Abszolút szülő pozícióba helyezze a blokkot a .blocText szöveggel, és állítsa be az összes él behúzását 30 képre. A kereten a jövőben animált megjelenést hozunk.

BlocText ( körvonal: 1 képpont tömör narancssárga; pozíció: abszolút; felül: 30 képpont; bal: 30 képpont; jobb: 30 képpont; alul: 30 képpont; )

A szöveg színét állítsa fehérre, csináld nagybetűvel, állítsa be a párnázást a szélek köré.

Szöveg ( szín: #fff; szövegátalakítás: nagybetűk; kitöltés: 0 20 képpont; )

Állítsa a második szint fejlécet 25 pikk-re.

Szöveg h2 ( betűméret: 25 képpont; )

A második részét narancssárgára tesszük, alulról behúzzuk a vonalat, és az aláhúzásból 2 ásót készítünk.

Szöveg h2 span (szín: narancssárga; kitöltés alul: 3px; szegély-alsó: 2px tömör #fff; )

A bekezdést abszolút pozícionáljuk, 180 csúccsal csökkentjük. állítsa be a blokk szélességét 250 képpontra. Hozzáadás balról oldalszegély 4 ásóban. és állítsa be a párnázást.

p szöveg (pozíció: abszolút; felső: 180 képpont; szélesség: 250 képpont; szegély balra: 4 képpont tömör #ffb611; kitöltés: 0 10px; )

Pszeudoelemek leírása::előtte és::utána

Távolítsuk el a korábban .blocText osztályra beállított körvonalat, és állítsuk be pszeudoelemekre.

Pszeudoelemeket hozunk létre ::before ::after , leírjuk a fő stílusukat.

Abszolút pozicionáljuk őket, 100%-ra állítjuk a szélességet és magasságot, és fél másodperc alatt fizetjük a megjelenést.

BlocText::before, .blocText::after (tartalom: ""; pozíció: abszolút; felül: 0; bal: 0; szélesség: 100%; magasság: 100%; )

Külön, ::mielőtt 1 csúcsban felülről és alulról szegélyt rendelünk. és állítsa be az x tengely transzformációját: scale(0,1) .

BlocText::before ( szegély-felül: 1px tömör #fff; keret-alul: 1px tömör #fff; transzformáció: skála(0,1); )

Ugyanezt tesszük a ::after esetében is, csak a szegély van a bal és a jobb oldalon, és a transzformáció az Y tengely mentén történik

BlocText::after (bal oldali szegély: 1 képpont tömör #fff; jobb szegély: 1 képpont tömör #fff; transzformáció: skála (1,0); )

A megjelenésükhöz pedig az 1-ben megadjuk az összes tengely transzformációját.

Dws:hover .blocText::before, .dws:hover .blocText::after ( transzformáció: scale(1,1); )

És marad a szöveg elrejtése, ehhez az átlátszatlanságot: 0-t rendelünk a .text osztályhoz, és hozzáadjuk annak sima megjelenését.

Lebegtetés közben pedig megjelenik a szöveg.

Dws:hover .text ( átlátszatlanság: 1; )

A végén egy klassz Hover Effects-et kaptunk, amikor egy kép fölé vittük az egérmutatót.

Ha tetszett a videó, kérlek oszd meg ismerőseiddel a közösségi hálózatokonÉs közben ne felejts el kommentelni.

A leckét Gorelov Denis készítette fel.