Svävningseffekter för sidans bakgrund. Originaleffekter när du svävar över föremål

CSS hovringseffekt

övergång
transformera skala (x, y)
: sväva :: före :: efter

Beskriver de huvudsakliga bildstilarna/effekterna i css

Vi ställer in blocket med bilden till en fast bredd och höjd, och med hjälp av översvämning: dold, dölj allt onödigt utanför det, lägg till en markör.

BlocImg (bredd: 600px; höjd: 338px; overflow: dold; markör: pekare;)

För enkelhetens skull placerar vi blocket i mitten av skärmen.

Dws (position: absolut; topp: 50 %; vänster: 50 %; transformation: translate (-50 %, -50 %);)

Sedan gör vi bilden 100% bred och hänger en jämn animation på en halv sekund.

BlocImg img (bredd: 100 %; övergång: .5s;)

Ställ in oskärpa filtret på 1 topp. filter: blur (1px) och gör bakgrunden mörkare, och för detta lägger vi till en svart bakgrund till .blocImg-klassen, och vid hovring gör vi bilden halvtransparent opacitet: .5; ...

Dws: hover .blocImg img (transformera: rotera (-10 grader) skala (1,3); filter: oskärpa (1px); opacitet: 0,5;)

Låt oss nu börja styla texten.

Dekorera blockets textinnehåll

Vi placerar .blocText-blocket som det absoluta överordnade och sätter marginalerna på alla kanter till 30 pt. I framtiden kommer vi att göra dess animerade utseende längs ramen.

BlocText (kontur: 1px fast orange; position: absolut; topp: 30px; vänster: 30px; höger: 30px; botten: 30px;)

För texten, ställ in färgen på vit, ställ in den med versaler, ställ in stoppning runt kanterna.

Text (färg: #fff; textomvandling: versaler; utfyllnad: 0 20px;)

Ställ in rubriken för den andra nivån till 25 spikar.

Text h2 (font-size: 25px;)

Vi gör den andra delen av den orange, ställer in indragen från botten för linjen och gör understrykningen i 2 toppar.

Text h2 span (färg: orange; padding-bottom: 3px; border-bottom: 2px solid #fff;)

Vi placerar stycket absolut, sänker det med 180 peak. ställ in bredden på dess block till 250 pixlar. Lägg till en 4 toppkant på vänster sida. och ställ in stoppningen.

Text p (position: absolut; topp: 180px; bredd: 250px; kant-vänster: 4px fast # ffb611; utfyllnad: 0 10px;)

Beskriver :: före och :: efter pseudoelement

Låt oss ta bort konturen som tidigare tilldelats klassen .blocText och ställer in den för pseudoelementen.

Skapa pseudoelement :: före :: efter, beskriv deras huvudsakliga stilar.

Vi placerar dem absolut, ställer in bredden och höjden på 100% och betalat utseende på en halv sekund.

BlocText :: före, .blocText :: efter (innehåll: ""; position: absolut; topp: 0; vänster: 0; bredd: 100%; höjd: 100%;)

Separat, :: innan vi tilldelar gränsen från toppen och botten till 1 topp. och ställ in transformationen för X-axelns transformation: skala (0,1).

BlocText :: före (kant-topp: 1px fast #fff; kant-botten: 1px fast #fff; transform: skala (0,1);)

Vi gör samma sak för :: efter, bara gränsen är nu på vänster och höger sida, och transformationen längs Y-axeln

BlocText :: efter (kant-vänster: 1px fast #fff; kant-höger: 1px fast #fff; transform: skala (1,0);)

Och för deras utseende indikerar vi transformationen för alla axlar i 1.

Dws: hover .blocText :: före, .dws: hover .blocText :: efter (omvandla: skala (1,1);)

Och det återstår att dölja texten, för detta sätter vi .text-klassen på opacitet: 0 och lägger till dess smidiga utseende.

Och när du håller muspekaren, visas texten.

Dws: hover .text (opacitet: 1;)

Till slut fick vi coola Hover Effects när vi svävade över bilden.

Den som var intresserad av videon, dela den med dina vänner på sociala nätverk och glöm inte att kommentera samtidigt.

Lektionen förbereddes av Denis Gorelov.

Först och främst, för de som inte är riktigt inne i ämnet eller inte alls i ämnet, ska jag kort förklara vad det är. Dessa är olika typer av effekter (popup-fönster, verktygstips, mjuka övergångar, transformationer, rotation, zoom, offset, etc.) som appliceras på delar av en webbplats när du håller muspekaren över dem med muspekaren. Dessa effekter kan implementeras med olika jQuery-plugins, eller ren.
Idag har jag förberett en stor samling av original hovringseffekter för bilder skapade med CSS3, utan att ansluta javascript-bibliotek. Jag kommer inte att prata om fördelarna och nackdelarna med att implementera svävningseffekter i ren CSS3, det här är ett annat ämne, titta bara på exemplen och, om nödvändigt, använd den du gillar på din webbplats. Alla effekter som presenteras i recensionen är försedda med ett demoexempel och detaljerad dokumentation med källor. Manualerna är mestadels på borgerliga, men allt är mer eller mindre intuitivt.

Vill bara fästa din uppmärksamhet på det faktum att alla dessa exempel kommer att fungera korrekt endast i moderna webbläsare som stöder CSS3-egenskaper.

För att inte bryta helhetsbilden förvrängde han inte namnen på effekterna med maskinöversättning (med undantag för några), han lämnade originalen till titlarna som utvecklaren kallade dem.

En mycket intressant svävningseffekt för miniatyrbilder, med tunna linjer i design och typografi. Flera olika typer av effekter för utseendet av bildtexter för bilder, mjuka och icke-påträngande 3D-transformationer och mjuka övergångar av pseudoelement. Fungerar bara i moderna webbläsare.

iHover är en imponerande samling rena CSS3-svävningseffekter, med stöd för Bootstrap 3. Byggd med Scss CSS (fil), lätt modifierbar med variabler. Koden är modulär, det finns ingen anledning att inkludera hela filen. 30+ olika effekter i ett paket. Allt är ganska väldokumenterat och effekterna är mycket enkla att använda. Allt du behöver göra är att anpassa HTML-uppmärkningen korrekt och sätta CSS-filen att fungera.

Skapar några enkla men eleganta svävningseffekter för bildtexter. Tanken är att få titeln, författarens namn och länkknappen att visas dramatiskt när du håller muspekaren över miniatyrerna. För vissa effekter används visuella 3D-transformationer.

En väldigt enkel övergångseffekt, utan några speciella bells and whistles, en helt rund bild i en ram, förvandlas genom att ändra fokus vid svävning och det är allt.

Hover-effekter för CSS3-miniatyrer

Utvecklaren positionerar sitt arbete som ett exempel på ett bildgalleri med övergångseffekter när anteckningar (bildtexter) visas för miniatyrer. Starkt stöd för moderna webbläsare deklareras, inklusive IE 9+. Naturligtvis är det svårt att kalla det ett fullfjädrat galleri, men effekten av utseendet på signaturer är ganska intressant.

Ytterligare en uppsättning CSS-regler för att skapa imponerande transformationseffekter när du håller musen över absolut cirkulära miniatyrer. Paketet innehåller 7 typer av CSS3-övergångar, mycket detaljerad dokumentation om installation och användning. Effekter stöds av alla moderna webbläsare.

Roterande miniatyrer när du svävar

Den enkla effekten av att rotera runda miniatyrer när du håller muspekaren över dem är ungefär densamma som du kan se på min blogg, i meddelanden om inlägg på huvudsidan. Implementerad i ett par rader css-kod.

Om det översätts ordagrant: "Sexuell effekt när du svävar över." Naturligtvis kommer du knappast att märka något så sexigt i denna effekt, om du inte har en våldsam fantasi, men effekten är intressant på sitt sätt och är värd att uppmärksamma.

Fem olika svävningseffekter för bilder. Pop-up bildtexter i tre varianter, gardiner i form av att ändra graden av transparens och rotation med horisontell rörelse.

4 typer av animationseffekter för bildtexter, implementerade uteslutande med CSS3. Olika fadepositioner och övergångseffekter, ganska standardprestanda. För att förstå hur animeringen fungerar, ta en titt på källkoden för demosidan, jag hittade ingen separat dokumentation.

Gallerikantade miniatyrer med olika bildtexter, rotation, fade, pop och mer. Dokumentationen om användning och konfigurering är ganska knapphändig, men om du verkligen vill kan du ta reda på det.

Denna effekt representerar inget speciellt, en banal förändring i ljusstyrkan på bilder vid hovring, förutom att animationselement läggs till. Du måste ta reda på detaljerna för implementeringen själv genom att utöka källkoden för demot.

En annan uppsättning med 10 svävningseffekter för bilder, olika modifieringar av miniatyrer vid hovring, zoom, rotation, rotation, tona, etc.

Olika effekter för att animera ramen runt bilderna, det ser ganska attraktivt ut, det finns en detaljerad guide om hur man ställer in och använder.

Original CSS3 hovringseffekter tillämpas för att effektivt visa miniatyrbildstexter vid hovring. CSS-regeluppsättningen innehåller 10 olika effekter som du kan använda separat för olika bilder. Effekterna är verkligen imponerande, speciellt när du inser att allt är gjort med CSS3. En detaljerad guide hjälper dig att ta reda på vad som är vad.

Tanken är att skapa en SVG som är en bakgrundsform för någon form av bokstäver och förvandlas till en annan form vid muspekande. Således kan du göra många olika alternativ, i exemplet visas tre typer av övergångseffekter. Det fina med att använda SVG är att vi kan ändra storlek på formuläret så att det passar den överordnade behållaren.

Glidande bilder

Kärnan i denna effekt är att bilden flyttas upp och ner för att signaturen ska se ut. Om du arbetar med stilparametrarna tror jag att du kan uppnå ganska fina effekter, men som standard ser allt väldigt enkelt ut.

Med denna effekt är allt enkelt, bildtexter för bilder glider ut till höger uppe eller från vänster till botten, i form av ett band med en genomskinlig mörk bakgrund, allt är väldigt enkelt att omforma med hjälp av css-egenskaper.

En intressant lösning, miniatyrerna presenteras i en mörkare form, när du håller muspekaren över dem visas bilderna och signaturen dyker upp på en ljus bakgrund.

En bildtext dyker upp från hörnet och expanderar diagonalt över hela bildens område.

Några mer intressanta lösningar för att implementera popup-bildtexter för miniatyrbilder. I onlineredigeraren kan du experimentera med parametrarna och uppnå mer imponerande resultat.

En uppsättning vackra effekter när du håller musen över miniatyrer, olika typer av utseende och design av bildtexter. Tunna linjer i kontrast till en något mörkare bakgrund skapar lättlästa informationsblock.

Bisarra former och zoomeffekt kombinerat med animeringseffekt av bildtexter till miniatyrbilder.

Underbara effekter av att lägga över ikoner på miniatyrer av bilder i olika varianter av utseende. I exemplet används symbolen (+) som är skisserad i en cirkel med kantradie: i CSS kan du också använda teckensnittsikonerna för att göra popup-panelen mer informativ.

Ett exempel på att skapa en visuell bildeffekt för utmatning av volymetriska bildtexter till bilder med endast CSS3 och HTML5.

6 bildtexter

6 Alternativ för utseendet av popup-bildtexter för bilder vid hovring med CSS3. Detaljerad lektion om implementering och konfiguration, källor tillgängliga för nedladdning.

Och till sist, så att säga, kan jag inte undgå att nämna det enklaste sättet att skapa en popup-bildtext för en miniatyr med CSS3.

Tjänsten SendPulse är ett marknadsföringsverktyg för att skapa en prenumerationsbas och omvandla slumpmässiga besökare till din webbplats till vanliga. SendPulse samlar de viktigaste funktionerna för att attrahera och behålla kunder på en plattform:
● nyhetsbrev via e-post,
● webb-push,
● SMS-utskick,
● SMTP,
● meddelanden i Viber,
● skicka meddelanden till facebook messenger.

Nyhetsbrev e-post

Skickar push-meddelanden

SMTP

Facebook Messenger Bots

Skickar SMS

affiliateprogram

Om du gillar effekten kan du bara kopiera den färdiga koden och använda den!

Ge din webbplats liv!

Olika svävningseffekter kan göra sidorna på din webbplats fräschare. Tidigare, för vilken effekt som helst, var du tvungen att hantera javascript, men idag, efter CSS3-teknologins tillkomst, kan allt göras förbi användningen av javascript.

Dagens exempel är alla implementerade och optimerade för nya moderna webbläsare och kommer definitivt att fungera i dem (till exempel i webbläsare Mozilla eller WebKit). Vi kan inte försäkra dig om att arbeta i IE, men i de senaste versionerna kommer effekterna definitivt att fungera som förväntat. Men glöm inte att ett attraktivt återställningsalternativ har förberetts för varje effekt ifall webbläsaren fortfarande inte stöder effekten.

01. Öka

Demo: Att se

Denna effekt är mycket lätt att implementera, och den kan göras på flera sätt. Vi använde en metod där en marginalparameter läggs till i varje bild, och sedan, vid hovring, tas denna parameter bort. Låt oss säga att marginalinställningen börjar på 15 pixlar och vid hovring blir 2 pixlar, vilket gör att bilden ser ut att studsa. Du kan också bara använda den här effekten med text, även om länkarna är vertikala istället för horisontella.

Övergången här kan ställas in efter eget gottfinnande, och effekten kommer också att vara attraktiv utan någon övergång. Vi gjorde till exempel effekten lite slät, vilket vi trodde skulle ge lite smak åt effekten.

Bump Up CSS

Ex1 img (
kantlinje: 5px fast #ccc;
flyta till vänster;
marginal: 15px;
-webkit-transition: marginal 0,5s ease-out;
-moz-transition: marginal 0,5s lättnader;
-o-transition: marginal 0,5s lättnad;
}

Ex1 img: hover (
margin-top: 2px;
}
02. Stack & Grow

Författaren till denna effekt ville tydligen uppnå någon form av lavalampeffekt, eftersom när du för musen över listan med länkar, expanderar varje bild långsamt och återgår sedan till sin ursprungliga storlek.

För implementeringen här användes bilder med en storlek på 400x133 pixlar. De storleksändrades sedan till 300 x 100 pixlar med CSS och utökades vid hovring. Eftersom hela listan är centrerad i exemplet, bröt den nya storleken på bilderna hela justeringen. Detta problem kan lösas genom att ställa negativa marginaler till halva bredden på de zoomade bilderna.

CSS-kod för Stack & Grow

/ * Exempel 2 * /
#behållare (
bredd: 300px;
marginal: 0 auto;
}

# ex2 img (
höjd: 100px;
bredd: 300px;
marginal: 15px 0;
-webkit-transition: alla 1s lätthet;
-moz-övergång: alla 1s lätthet;
-o-transition: alla 1:or lätthet;
}

# ex2 img: hover (
höjd: 133px;
bredd: 400px;
marginal-vänster: -50px;
}
03. Tona in text

Här ville författaren skapa något som liknar en händelse av JavaScript-typ, när du för markören över ett objekt, och effekten visas på ett annat. Här togs text och bild och placerades sedan i en separat div, vänsterjusterad. Därefter lades parametrarna för färg: transparent och line-height: 0px till div. Detta gjorde det möjligt för texten att placeras överst på div och dölja den helt och hållet.

För att texten ska visas igen ändrar vi helt enkelt färg och höjd på linjen. När du håller muspekaren över bilden visas texten igen. Mycket rolig och enkel effekt.

Tona ut text i CSS

# ex3 (
bredd: 730px;
höjd: 133px;
linjehöjd: 0px;
färg: transparent;
teckenstorlek: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
teckensnittsvikt: 300;
text-transform: versaler;

}

# ex3: hovra (
linjehöjd: 133px;
färg: # 575858;
}

# ex3 img (
flyta till vänster;
marginal: 0 15px;
}
04. Krokigt foto

Denna effekt är väldigt enkel, men den fungerar utmärkt för ett miniatyrbildsgalleri. Först måste du skapa ett rutnät med bilder och sedan rotera bilderna när du håller muspekaren över dem, vilket skapar en attraktiv effekt.

Det finns många nya CSS-värden att använda här, så återställningsalternativet för äldre webbläsare är också värt att överväga. I vårt galleri kommer övergångar, transformationer och blockskuggor att användas, dock enligt dina önskemål. Transformationen kommer att ansvara för rotationen av bilden, och övergångarna kommer att ansvara för den mjuka och smidiga effekten.

Det är här du kan använda pseudo-väljare.

Krokigt foto CSS

# ex4 (
bredd: 800px;
marginal: 0 auto;
}

# ex4 img (
marginal: 20px;
kantlinje: 5px fast #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-transition: all 0.5s ease-out;
-moz-transition: alla 0.5s lätthet;
-o-transition: alla 0.5s lätthet;
}

# ex4 img: hover (
-webkit-transform: rotera (-7 grader);
-moz-transformera: rotera (-7 grader);
-o-transformera: rotera (-7 grader);
}
05. Tona in och reflektera

Den här effekten är lite mer komplicerad att implementera, så vi var tvungna att mixtra lite med den för att få en anständig effekt. Standardbildpositionen är något genomskinlig. Sedan, när du håller muspekaren över bilden, sänks transparensnivån och bilden återställs till sitt ursprungliga utseende, liksom en liten glöd och reflektion uppträder (endast för webbläsare i WebKit-familjen).

Tyvärr är reflektionen egentligen ingen övergång, så den dyker upp direkt, även om resten av innehållet dyker upp i slow motion.

Om du är förvirrad över CSS för reflektioner kan du läsa mer om den i (David Walsh).

Tona in och reflektera effekt CSS

# ex5 (
bredd: 700px;
marginal: 0 auto;
min-höjd: 300px;
}

# ex5 img (
marginal: 25px;
opacitet: 0,8;
kantlinje: 10px fast #eee;

/ * Övergång * /
-webkit-transition: alla 0.5s lätthet;
-moz-transition: alla 0.5s lätthet;
-o-transition: alla 0.5s lätthet;

/ * Reflektion * /
-webkit-box-reflect: under 0px -webkit-gradient (linjär, vänster topp, vänster botten, från (transparent), color-stop (.7, transparent), till (rgba (0,0,0,0.1)) );
}

# ex5 img: hover (
opacitet: 1;

/ * Reflektion * /
-webkit-box-reflect: under 0px -webkit-gradient (linjär, vänster topp, vänster botten, från (transparent), color-stop (.7, transparent), till (rgba (0,0,0,0.4)) );

/ * Glöd * /
-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);
}
Slutsats

Dessa 5 exempel borde räcka för att inspirera dig att skapa något eget. Kom ihåg att du alltid kan experimentera med färdiga exempel och sedan berätta om dem.

Om du har stött på andra attraktiva effekter någonstans på nätet, berätta gärna för oss och resten av läsarna om det.