Efecte de hover originale pentru imagini folosind CSS3 pur. Efecte de hover CSS - pentru imagini, butoane, atunci când treceți cu mouse-ul peste linkuri, blocuri etc.

Foarte des, pe site-uri web, s-ar putea să întâlniți modificări sau butoane la trecerea cursorului. O pseudo-clasă specială:hover în CSS vă permite să implementați sarcina. Astăzi vom analiza câteva tehnici care ne permit să facem acest truc, iar mai jos vom publica o listă cu cele mai interesante dintre ele (cu scurte descrieri/explicații). Vom împărți toate opțiunile în:

Aceste grupuri sunt foarte arbitrare, pentru că multe exemple se suprapun și sunt universale, adică pot fi găsite la proiectarea diferitelor obiecte.

Efect de hover Stiluri CSS este adăugat la dreapta elementului astfel:

a:hover (culoare: roșu; )

Cel mai adesea, mecanismul este folosit special pentru link-uri pentru a le schimba culoarea sau pentru a adăuga/elimina sublinierea. Cu toate acestea, poate fi specificat și pentru alte blocuri, butoane, texte sau utilizat la creare.

buton:hover ( fundal: rgba(0,0,0,0); culoare: roșu; ) .my-picture:hover (opacitate: 0,5; filtru: alpha(opacity=50); )

Browserele moderne percep la fel de corect CSS trece efect asupra hover, deși în versiunile mai vechi ale IE 6 și mai jos funcționează doar pentru link-uri. În plus, unele surse au spus că acest lucru trebuie specificat în cod.

Apropo, la setarea stilurilor de link, se pot folosi suplimentar și selectoare: link - pentru paginile care nu au fost încă vizitate, :visited - pentru cele în care ați fost deja + :activ determină adresa activă în prezent. Este important să plasați efectul hover în CSS după :link și :visited dacă există.

Să trecem de la teorie la practică. Mai jos este o listă materiale utileși fragmente - urmați linkurile pentru a vedea sursele.

Efecte de trecere cu mouse-ul pentru butoane și linkuri

După cum am spus mai sus, aceasta este cea mai populară categorie de obiecte de pe site-ul în care se găsește această tehnică. Iată câteva opțiuni pe această temă.

Exemple simple pentru butoane

Sullivan Buttons

Trucul este că atunci când treci cu mouse-ul deasupra butoane diferite Pe lângă schimbarea culorii de fundal, este lansată și o mică animație cu pictograme (fiecare cu propriile sale).

Pictograme CSS pe Hover

Selecția de 5 opțiuni simple implementarea sarcinii. În toate cazurile, sunt folosite pictograme suplimentare care apar în dreapta/stânga textului sau îl înlocuiesc.

Buton Hover Effects

În comparație cu exemplul anterior, aceste 12 funcții de declanșare arată mult mai interesante: atât vizual, cât și din punct de vedere al codului. Nu fără JS.

Nav Hovers

Mai multe trucuri care îți permit să faci ceva mai neobișnuit decât cu proprietate de bază text-decor. Fundalul butoanelor este umplut suplimentar cu diverse efecte vizuale.

Informații pe Hover

În prezent, funcționalitatea Sfaturi instrumente este acceptată în toate browserele, dar o puteți personaliza în funcție de nevoile dvs. În exemplul curent, pseudo-clasa este declanșată pentru eticheta dfn, care arată elegant. Codul este destul de compact HTML + CSS.

Butonul Mana

Una dintre cele mai opțiuni originale efect de hover în blocuri - atunci când hover, este ca și cum l-ai umple cu lichid. Implementarea folosește CSS, HTML și SVG. Pentru anumite subiecte de site, acest fragment va fi cu siguranță o mană divină.

Efecte de trecere cu mouse-ul pentru imagini

15 tehnici de bază

În ciuda faptului că articolul a fost publicat cu destul de mult timp în urmă, metodele încă funcționează corect. Aici, probabil, sunt adunate toate transformările standard posibile pentru grafică: mai multe tipuri de zoom, rotație, estompare, alb/n, transparență, filtre, strălucire etc. Material foarte util.

Imagini frumoase cu efecte de hover

O selecție de 30 de acțiuni plăcute și netede atunci când treci cu mouse-ul peste o imagine. Datorită manipulărilor vizuale simple sub formă de zoom și adăugare de linii, se creează o impresie complexă bună. Pe alocuri titlul este mărit, iar scurta descriere este restrânsă. Opțiune excelentă pentru un portofoliu.

Animație Barberpole Hover

Animația nu este complicată la prima vedere, dar în cele din urmă arată foarte tare și neobișnuit.

Efecte de hover CSS cu detectarea direcției

O selecție excelentă de fragmente și coduri pe această temă poate fi găsită în articolul de pe css-tricks.com. Toate aceste exemple sunt unite de faptul că în timpul funcționării este determinată locația și direcția de mișcare a cursorului. Acest lucru, la rândul său, vă permite să creați reacții destul de originale atunci când treceți cu mouse-ul peste elementele paginii:

În multe dificile Soluții Javascriptși jQuery pentru efectele hover vă permit să diversificați și să îmbunătățiți semnificativ rezultatul.

Conștient de direcție Hover Goodness

Dale de direcție folosind clip-path Pure CSS

Găsiți restul trucurilor în articolul original.

Animatism

Această dezvoltare include mai mult de 100 moduri simple„animație” de imagini sau obiecte atunci când sunt plasate. Cu aceste funcții puteți implementa aspect diferit butoane, titluri, texte, pictograme sociale etc. Există opțiuni pentru modificarea afișajului imaginilor și suprapunerile de fundal translucide.

Link-ul conține 7 efecte de antet CSS3 - când trece cu mouse-ul peste o imagine, utilizatorul va vedea bloc informativ cu titlu, descriere scurtași un link de urmat. Acest lucru nu înseamnă că exemplele sunt foarte originale, dar cu siguranță vor ajuta la diversificarea unui proiect de conținut static.

Biblioteci CSS Hover

Hover.css

Proiectul, numit simplu Hover.css, conține o colecție de efecte CSS3 pentru link-uri, butoane, blocuri etc. Puteți folosi codul gata făcut și/sau adăugați propriile modificări la acesta. Există o mulțime de lucruri interesante aici: transformări 2D/3D, lucrul cu fundaluri și cadre, umbre, pictograme. Soluția este disponibilă în formatele CSS, LESS și Sass.

Imagehover.css

O altă bibliotecă care setează efecte de hover pentru imagini - în versiune gratuită veți găsi 44 de opțiuni de transformare (setul premium conține de 5 ori mai multe). LESS și SCSS sunt, de asemenea, acceptate aici, acest fișier cântărește doar 19 kb. Site-ul are o pagină care demonstrează toate exemplele de lucru. Sunt multe de oferit cipuri unice, care nu au fost menționate mai sus.

Sunt peste 30 în proiect tehnici diferite pentru obiecte rotunde și pătrate. Toate sunt destul de originale; practic nu există acțiuni simple „un singur element” sub forma unui zoom/fly out obișnuit. Sarcina pentru CSS pur 3 + HTML (plus fișiere Scss incluse). Compatibilitate excelentă cu Bootstrap 3, documentație disponibilă.

Total. Sperăm că aceste efecte de hover CSS atunci când treceți cu mouse-ul peste imagini, blocuri, link-uri și alte elemente ale paginii v-au ajutat să înțelegeți acest subiect. Puteți implementa cele mai de succes soluții, în opinia dvs., pe site-urile dvs. - fie că este vorba de conectarea unei biblioteci cu drepturi depline sau pur și simplu de integrare varianta mica cod.

Daca mai stii ceva caracteristici interesanteși fragmente, trimiteți-le adrese URL în comentarii. Și vom adăuga la articol în viitor.

De la autor: câteva lecții despre crearea efectelor de hover folosind CSS pur, legate de direcția cursorului. Lecțiile sunt destinate celor care au cel puțin cunoștințe de bază de HTML și cunoștințe avansate de CSS/SASS.

Disclaimer

Efectele nu funcționează în browserele mai vechi; necesită un browser cu capacitatea de a reda transformări 3D. Am testat efectele în ultimele versiuni Browsere Chrome, Firefox și Safari.

De asemenea, folosesc minunata bibliotecă AutoPrefixer pentru înlocuire automată prefixe de furnizor. Accesați setările CodePen pornit fila CSSși selectați AutoPrefixer.

Efect de hover cu paralaxă

Introducere

Designerul meu și cu mine am întâlnit pagina principala site-ul Festivalul Kikkîn 2015, a implementat carduri cu efect de paralaxă atunci când trecea peste cursor. Ne-a plăcut și am vrut să recreăm acest efect în proiectul nostru. Cu toate acestea, din cauza naturii codului, nu am putut folosi JS. Am început să caut soluții CSS pure și am găsit ceva interesant.

Atotputernicul tilde

Unul dintre selectoarele mele favorite în CSS este tilde (~), care selectează cel mai apropiat element care se potrivește cu selectorul, dar este situat după primul element. De exemplu, ul ~p va selecta p elemente din codul de mai jos:

Mi-am dat seama că acest lucru poate fi folosit pentru a crea efecte de hover bazate pe direcția cursorului pentru aproape orice!

Structura

Structura linkului este destul de simplă - un container cu un set de etichete și un container pentru conținutul cardului. Toate atributele href trebuie să aibă aceeași adresă URL.

Deoarece nu avem JS care să ne avertizeze cu privire la direcția de mișcare a mouse-ului și poziția cursorului, vom folosi link-uri pentru a împărți cardul în zone de detectare. Dacă, de exemplu, cursorul aterizează pe o legătură Nr. 1 este deasupra, apoi mouse-ul intră în zona de detectare Nr. 1 înainte de a intra în Nr. 3 și Nr. 4.

Pentru paralaxa de acest tip, cel mai mult proprietate importantă nu va exista o transformare, ci o transformare-origine suprapusă pe card. Acesta trebuie schimbat pentru toate zonele de detectare și atribuit colțului opus față de zona de detectare curentă.

De exemplu, dacă intrăm în zona de detecție nr. 1 (stânga sus), originea transformării ar trebui să fie dreapta-jos, adică colțul opus. Concluzia este aceasta: colțul afectat ar trebui să se îndepărteze de noi, iar colțurile rămase ar trebui să se miște spre noi.

Finisaje

Pentru a finaliza efectul nostru de paralaxă, să adăugăm un cadru cardului, care se va îndoi și când treceți cu mouse-ul peste link. Această tehnică poate fi aplicată și altor elemente din card.

// border styles.card ( poziție: relativ; .border ( transform-origine: centru centru; poziție: absolut; sus: 12px; stânga: 12px; lățime: calc(100% - 24px); înălțime: calc(100% -) 24px); chenar: 2px alb continuu; ) ) // paralax effect.container ( a ( &:hover, &:focus ( ~ .card ( .border ( transform: translateZ(24px); ) ) ) ) // împinge cadrul înapoi la clic &:activ (~ .card ( .border (transforma: niciunul; ) ) ) ) )

Tot ce rămâne este să (1) adăugați o tranziție la card pentru a netezi tranziția în colțuri și (2) eliminați stilurile de link, astfel încât acestea să nu fie vizibile. Îmi place să setez opacitatea la 0 pentru a evita incidentele. Pentru a evita suprapunerea din cauza rotațiilor cardului, mișc, de asemenea, legătura cu mouse-ul înainte.

Rezultat

Mai jos este versiunea completă a efectului de paralaxă. CodePen. Comutați caseta de selectare pentru a vedea locația linkurilor. Pentru a îmbunătăți efectul de paralaxă, am decis să mai adaug câteva link-uri.

Efectul de hover folosind un cub ca exemplu

Introducere

Înot single pentru adulți 2016 este un alt site cu un efect de hover impresionant bazat pe direcția cursorului. Făcând clic pe pictograma calendarului din stânga colțul de sus Se deschide un calendar 3D, unde fiecare zi este prezentată sub forma unui cub, care se rotește în funcție de direcția cursorului. Buna idee!

Mi-am dat seama imediat că un efect similar poate fi obținut folosind tilde. Aveam deja o formă de cub pe care o puteam modifica cu ușurință pentru legături și efecte de paralax.

Baza

Acum puteți începe să creați baza cubului cu link-uri. Trebuie să creați un container exterior, patru triunghiuri care vor fi asamblate într-un pătrat și un recipient interior cu șase elemente - patru goale și două cu conținut. Îmi place această ordine: sus, jos, stânga, dreapta, față, spate.

Pentru a crea legături triunghiulare puteți folosi Clippy. Pentru compatibilitatea cu Firefox, aveți nevoie și de traseul SVG. Legăturile trebuie să aibă o valoare translateZ pozitivă (aduse în față), altfel se vor ascunde în spatele cubului.

Pentru a defini lățimea, înălțimea și transformările pentru cub, folosim o variabilă cu o valoare de 12px. Pentru a diferenția laturile cubului, folosim diferite nuanțe de aceeași culoare pentru a simula iluminarea. Partea din spate este complet albă.

Am rotit ușor cubul, astfel încât să puteți vedea că toate părțile sunt aliniate corect. Dacă te uiți la transformare, poți vedea că toate laturile cubului au o valoare translateZ negativă. Adică, toate părțile, cu excepția față, sunt în fundal.

Natura transformărilor 3D este de așa natură încât, dacă nu mutați întregul cub înainte, atunci o parte din acesta poate fi tăiată. fundal. Puteți muta cubul înainte, astfel încât să nu aveți această problemă. Din moment ce aveam deja un cub, abia l-am atins. Scrieți în comentarii dacă aveți dificultăți la crearea unui cub.

efect de hover

Apoi, trebuie să adăugați o rotație la hover. Efectul poate fi stilat după cum doriți, dar cea mai realistă metodă pe care am găsit-o este legată de mouse. Dacă mouse-ul intră în cub de la stânga, cubul ar trebui să se rotească de la stânga la dreapta. Toate virajele trebuie să fie de 180 de grade/0,5 ture sau echivalente negative. Vom adăuga și o tranziție, astfel încât cubul să se rotească corect.

Lustruire

Două lucruri trebuie lustruite:

Triunghiul de jos întoarce textul din spate cu susul în jos.

Hoverul este prea sensibil: trecerea între triunghiuri provoacă viraj inutile.

Cu text, cel mai simplu mod este să rotiți partea din spate la dreapta fără a netezi la virajul principal. Din anumite motive, schimbarea triunghiului de jos îl afectează și pe cel de sus. Prin urmare, trebuie să adăugăm o rotație suplimentară pentru ambele efecte de hover.

Sensibilitatea efectelor hover a fost mai dificil de fixat. Soluția este ca legătura curentă să ocupe întregul spațiu al celorlalte trei legături (în lățime/înălțime completă, eliminați traseul de clipare, treceți înainte), dar apoi efectul unghiular interesant dispare (când mișcați rapid mouse-ul de-a lungul unei curbe peste cub). În cele din urmă, am rezolvat problema - am setat o întârziere la tranziție, astfel încât remedierea să nu funcționeze dacă cursorul de pe cub nu rămâne mai mult de o secundă. Întârzierea nu elimină toate problemele, dar atenuează cele mai multe dintre ele.

Rezultat

Concluzie

Pot fi create atât de multe efecte interesante de hover folosind tilde, transformări și tranziții netede. Designerul meu a venit cu ideea de a crea un acvariu în care peștii să înoate în direcția opusă cursorului. Puteți crea un efect de ondulare a apei, puteți roti imaginile cu deplasare și puteți crea și animații cu estompare a mișcării. Scrieți în comentarii dacă ați folosit deja această tehnică!

În primul rând, pentru cei care nu sunt încă complet sau deloc în subiect, voi explica pe scurt ce sunt efectele hover. Acestea sunt diferite tipuri de efecte (subtitrări pop-up, sfaturi cu instrumente, tranziții netede, transformare, rotație, mărire, deplasare etc., etc.) aplicate elementelor site-ului web atunci când treceți mouse-ul peste ele. Aceste efecte pot fi realizate folosind diverse Pluginuri jQuery, și în CSS3 pur.
Astăzi am pregătit o selecție largă de efecte originale de trecere cu mouse-ul pentru imaginile create folosind CSS3, fără a conecta biblioteci javascript. Nu voi vorbi despre avantajele și dezavantajele implementării efectelor hover în CSS3 pur, acesta este un alt subiect, doar uită-te la exemple și, dacă este necesar, folosește-l pe cel care îți place pe site-ul tău. Toate efectele prezentate în recenzie sunt furnizate cu un exemplu demonstrativ și documentație detaliată cu codurile sursă. Manualele sunt în mare parte în limbaj burghez, dar totul este mai mult sau mai puțin intuitiv.

Aș dori să vă atrag imediat atenția asupra faptului că toate aceste exemple vor funcționa corect numai în browserele moderne care acceptă proprietăți CSS3.

Pentru a nu strica imaginea de ansamblu, nu am distorsionat denumirile efectelor cu traducerea automată (cu excepția unora), am lăsat titlurile originale așa cum le-a numit dezvoltatorul.

Foarte efect interesant când treceți cu mouse-ul peste miniaturile imaginilor, folosind linii fineîn design și tipografie. Mai multe tipuri diferite de efecte pentru apariția subtitrărilor imaginii, transformări 3D moi și neintruzive și tranziții netede ale pseudo-elementelor. Funcționează numai în browserele moderne.

iHover este o colecție impresionantă de efecte pur CSS3 hover, cu suport Bootstrap 3. Construit pe Scss CSS (fișier), ușor de modificat cu variabile. Codul este modular, nu este nevoie să includeți întregul fișier. Peste 30 de efecte diferite într-un singur pachet. Totul este destul de bine documentat și efectele sunt foarte ușor de utilizat. Tot ce trebuie să faceți este să creați corect marcajul HTML și să vă conectați fișier CSS a munci.

Creează câteva efecte simple, dar elegante, pentru subtitrările imaginilor. Ideea este să plasați cursorul peste miniaturi pentru a face să apară titlul, numele autorului și butoanele de contact. Pentru unele efecte, sunt folosite transformări vizuale 3D.

Un efect de tranziție foarte simplu, fără clopoței și fluiere speciale, complet imagine rotundăîntr-un cadru, se transformă prin schimbarea focalizării atunci când treceți cu mouse-ul și atât.

Efecte de trecere cu mouse-ul pentru miniaturi folosind CSS3

Dezvoltatorul își poziționează lucrarea ca exemplu de galerie de imagini cu efecte de tranziție atunci când apar adnotări (legendele) pe miniaturi. Sprijin încrezător declarat browsere moderne, inclusiv IE 9+. Desigur, este dificil să o numim o galerie cu drepturi depline, dar efectul apariției semnăturilor este destul de interesant.

Următorul set Reguli CSS, pentru a crea efecte de transformare impresionante atunci când treceți cu mouse-ul peste miniaturile perfect rotunde. Pachetul conține 7 tipuri de tranziții CSS3, documentație foarte detaliată despre configurare și utilizare. Efectele sunt acceptate de toate browserele moderne.

Rotiți miniaturile la trecerea cursorului

Un simplu efect de rotire a miniaturilor rotunde atunci când treceți cursorul mouse-ului peste ele, cam la fel puteți vedea pe blogul meu, în anunțurile postărilor de pe pagina principală. Implementat cu câteva linii de cod CSS.

Tradus literal: „Efect sexy când treci cu mouse-ul peste imagini.” Desigur, este puțin probabil să observați ceva atât de sexy în acest efect, cu excepția cazului în care aveți o imaginație sălbatică, dar efectul este interesant în felul său și merită să îi acordați atenție.

Cinci efecte diferite pentru imagini când treci cu mouse-ul peste ele. Semnături pop-up în trei variante, perdele sub formă de modificare a gradului de transparență și rotație cu mișcare orizontală.

4 tipuri de efecte de animație pentru legendele imaginilor, implementate exclusiv folosind CSS3. Poziții diferite la apariție și efecte de tranziție, un design destul de standard. Pentru a înțelege cum funcționează animația, aruncați o privire la sursă Nu am găsit nicio pagină demonstrativă sau documentație separată.

Galerii miniaturale dispuse in grila cu diverse efecte pentru aparitia semnaturii, rotatie, dezvoltare, pop-up etc. Documentația despre utilizare și configurare este destul de rară, dar dacă doriți cu adevărat, vă puteți da seama.

Acest efect nu este nimic special, o schimbare banală a luminozității imaginilor atunci când treceți cu mouse-ul, cu excepția faptului că au fost adăugate elemente de animație. Va trebui să vă dați seama singuri detaliile implementării prin stabilirea codului sursă al demo-ului.

Un alt set de 10 efecte de trecere cu mouse-ul pentru imagini, diverse modificări ale miniaturilor la trecerea cu mouse-ul, mărire, rotație, rotație, întunecare etc.

Efect de animație de frontieră

Diverse efecte de animație a cadrelor din jurul imaginilor arată destul de atractiv, există un manual detaliat pentru configurarea și utilizarea acestuia.

Efecte originale de hover pe CSS3 folosit pentru apariția eficientă a subtitrărilor în miniaturile imaginilor la hover. Setul de reguli CSS include 10 efecte diferite pe care le puteți utiliza individual imagini diferite. Efectele sunt cu adevărat impresionante, mai ales având în vedere că totul a fost realizat folosind CSS3. Ghid detaliat, vă va ajuta să vă dați seama ce este.

Ideea este de a crea un SVG care este o formă de fundal pentru un text și se transformă într-o altă formă la trecerea mouse-ului. În felul acesta poți face multe opțiuni diferite, în exemplu, sunt prezentate trei tipuri de efecte de tranziție. Demnitate folosind SVG este că putem redimensiona matrița în funcție de dimensiuni container părinte.

Imagini de alunecare

Esenta acest efect este că imaginea este mutată în sus și în jos pentru a dezvălui legenda. Dacă lucrați cu parametrii de stil, cred că puteți obține niște efecte destul de drăguțe, dar, implicit, totul pare foarte simplu.

Cu acest efect, totul este simplu, subtitrările pentru imagini alunecă în dreapta sus sau în stânga jos, sub forma unei panglici cu un fundal întunecat translucid, totul este foarte simplu reformatat folosind proprietățile css.

O soluție interesantă: miniaturile sunt prezentate într-o formă întunecată; când treceți cu mouse-ul peste ele, imaginile apar și semnătura apare pe un fundal deschis.

Legenda pentru imagine apare din colț și se extinde în diagonală pe întreaga zonă a imaginii.

Mai multe încă solutii interesante pentru a implementa legendele pop-up pentru miniaturile imaginilor. În editorul online, puteți experimenta parametrii și puteți obține rezultate mai impresionante.

Kit efecte frumoase atunci când treceți cu mouse-ul peste miniaturi, diferite tipuri de aspect și design de subtitrări pentru imagini. Liniile subțiri, în contrast cu un fundal ușor întunecat, creează blocuri de informații ușor de citit.

Forme bizare și efect de mărire combinate cu efect de animație apariția legendelor pentru miniaturile imaginilor.

Efecte minunate ale suprapunerii pictogramelor pe miniaturile imaginilor în diferite variante de aspect. Exemplul folosește simbolul (+) conturat într-un cerc cu folosind bord-raza: în CSS, puteți utiliza și fonturi de pictograme pentru a face panoul pop-up mai informativ.

6 Subtitrări pentru imagini

6 Opțiuni pentru apariția subtitrărilor de imagini pop-up la trecerea cu mouse-ul folosind CSS3. Lecție detaliată privind implementarea și configurarea, surse disponibile pentru descărcare.

Cum să creați niște efecte subtile și moderne de subtitrare.

Aflați cum să creați câteva efecte simple, dar elegante, pentru subtitrările imaginilor. Ideea este de a avea o grilă de cifre și de a aplica un efect de hover elementelor care va dezvălui o legendă cu titlul, autorul și un buton de link.

Efectul Hover CSS3 compatibil cu direcția cu jQuery

Creați un efect de hover conștient de direcție folosind CSS3 și jQuery.

Aflați cum să creați un efect de hover care ține seama de direcție folosind unele bune CSS3 și jQuery. Ideea este să alunecăm o mică suprapunere deasupra unor miniaturi din direcția din care venim cu mouse-ul.

Efecte de hover în cerc cu tranziții CSS

Un tutorial despre cum să creați diferite efecte de trecere pe cercuri cu tranziții CSS și rotații 3D

Acest set de butoane CSS constă din câteva stiluri și efecte simple, creative și subtile pentru a vă inspira. Efectele pot fi văzute când treceți cu mouse-ul pe unele butoane și faceți clic pe altele. În cea mai mare parte, sunt folosite tranzițiile CSS, dar și animațiile CSS si pentru unele butoane se folosesc un pic de JavaScript pentru a adăuga/elimina clase de efecte.

Efecte Hover Icon

Un set de efecte simple de trecere a pictogramei rotunde cu tranziții CSS și animații pentru inspirație.

Iată o colecție de efecte simple de trecere pe pictogramă. Creați un efect subtil și elegant folosind tranziții și animații CSS pe ancore și pseudo-elementele acestora.

În primul rând, pentru cei care nu sunt încă complet sau deloc în materie, le voi explica pe scurt despre ce este vorba. Acestea sunt diferite tipuri de efecte (subtitrări pop-up, sfaturi cu instrumente, tranziții netede, transformare, rotație, mărire, deplasare etc., etc.) aplicate elementelor site-ului web atunci când treceți cursorul mouse-ului peste ele. Aceste efecte pot fi implementate folosind diverse plugin-uri jQuery sau pur.
Astăzi am pregătit o selecție largă de efecte originale de trecere cu mouse-ul pentru imaginile create folosind CSS3, fără a conecta biblioteci javascript. Nu voi vorbi despre avantajele și dezavantajele implementării efectelor hover în CSS3 pur, acesta este un alt subiect, doar uită-te la exemple și, dacă este necesar, folosește-l pe cel care îți place pe site-ul tău. Toate efectele prezentate în recenzie sunt furnizate cu un exemplu demonstrativ și documentație detaliată cu codurile sursă. Manualele sunt în mare parte în limbaj burghez, dar totul este mai mult sau mai puțin intuitiv.

Aș dori să vă atrag imediat atenția asupra faptului că toate aceste exemple vor funcționa corect numai în browserele moderne care acceptă proprietăți CSS3.

Pentru a nu strica imaginea de ansamblu, nu am distorsionat denumirile efectelor cu traducerea automată (cu excepția unora), am lăsat titlurile originale așa cum le-a numit dezvoltatorul.

Un efect foarte interesant atunci când treceți cu mouse-ul peste imagini în miniatură, folosind linii fine în design și tipografie. Mai multe tipuri diferite de efecte pentru apariția subtitrărilor imaginii, transformări 3D moi și neintruzive și tranziții netede ale pseudo-elementelor. Funcționează numai în browserele moderne.

iHover este o colecție impresionantă de efecte pur CSS3 hover, cu suport Bootstrap 3. Construit pe Scss CSS (fișier), ușor de modificat cu variabile. Codul este modular, nu este nevoie să includeți întregul fișier. Peste 30 de efecte diferite într-un singur pachet. Totul este destul de bine documentat și efectele sunt foarte ușor de utilizat. Tot ce trebuie să faceți este să creați corect marcajul HTML și să includeți fișierul CSS în lucrarea dvs.

Creează câteva efecte simple, dar elegante, pentru subtitrările imaginilor. Ideea este să plasați cursorul peste miniaturi pentru a face să apară titlul, numele autorului și butoanele de contact. Pentru unele efecte, sunt folosite transformări vizuale 3D.

Un efect de tranziție foarte simplu, fără clopoței și fluiere speciale, o imagine complet rotundă într-un cadru, se transformă prin schimbarea focalizării atunci când treceți cu mouse-ul și atât.

Efecte de trecere cu mouse-ul pentru miniaturi folosind CSS3

Dezvoltatorul își poziționează lucrarea ca exemplu de galerie de imagini cu efecte de tranziție atunci când apar adnotări (legendele) pe miniaturi. Se declară suport sigur de către browserele moderne, inclusiv IE 9+. Desigur, este dificil să o numim o galerie cu drepturi depline, dar efectul apariției semnăturilor este destul de interesant.

Un alt set de reguli CSS pentru a crea efecte de transformare impresionante atunci când treceți cu mouse-ul peste miniaturile perfect rotunde. Pachetul conține 7 tipuri de tranziții CSS3, documentație foarte detaliată despre configurare și utilizare. Efectele sunt acceptate de toate browserele moderne.

Rotiți miniaturile la trecerea cursorului

Un simplu efect de rotire a miniaturilor rotunde atunci când treceți cursorul mouse-ului peste ele, cam la fel puteți vedea pe blogul meu, în anunțurile postărilor de pe pagina principală. Implementat cu câteva linii de cod CSS.

Pentru a-l traduce literal: „Efect sexual atunci când treci cu mouse-ul deasupra”. Desigur, este puțin probabil să observați ceva atât de sexy în acest efect, cu excepția cazului în care aveți o imaginație sălbatică, dar efectul este interesant în felul său și merită să îi acordați atenție.

Cinci efecte diferite pentru imagini când treci cu mouse-ul peste ele. Semnături pop-up în trei variante, perdele sub formă de modificare a gradului de transparență și rotație cu mișcare orizontală.

4 tipuri de efecte de animație pentru legendele imaginilor, implementate exclusiv folosind CSS3. Poziții diferite la apariție și efecte de tranziție, un design destul de standard. Pentru a înțelege cum funcționează animația, aruncați o privire la codul sursă al paginii demo; nu am găsit nicio documentație separată.

Galerii miniaturale dispuse in grila cu diverse efecte pentru aparitia semnaturii, rotatie, dezvoltare, pop-up etc. Documentația despre utilizare și configurare este destul de rară, dar dacă doriți cu adevărat, vă puteți da seama.

Acest efect nu este nimic special, o schimbare banală a luminozității imaginilor atunci când treceți cu mouse-ul, cu excepția faptului că au fost adăugate elemente de animație. Va trebui să vă dați seama singuri detaliile implementării prin stabilirea codului sursă al demo-ului.

Un alt set de 10 efecte de trecere cu mouse-ul pentru imagini, diverse modificări ale miniaturilor la trecerea cu mouse-ul, mărire, rotație, rotație, întunecare etc.

Diverse efecte de animație a cadrelor din jurul imaginilor arată destul de atractiv, există un manual detaliat pentru configurarea și utilizarea acestuia.

Efectele de trecere cu mouse-ul CSS3 originale utilizate pentru apariția eficientă a subtitrărilor în miniaturile imaginii atunci când sunt plasate. Setul de reguli CSS include 10 efecte diferite pe care le puteți utiliza separat pentru imagini diferite. Efectele sunt cu adevărat impresionante, mai ales având în vedere că totul a fost realizat folosind CSS3. Un ghid detaliat vă va ajuta să vă dați seama ce este.

Ideea este de a crea un SVG care este o formă de fundal pentru un text și se transformă într-o altă formă la trecerea mouse-ului. În acest fel, puteți face multe opțiuni diferite; în exemplu, sunt afișate trei tipuri de efecte de tranziție. Avantajul utilizării SVG este că putem redimensiona formularul pentru a se potrivi cu dimensiunea containerului părinte.

Imagini de alunecare

Esența acestui efect este că imaginea se mișcă în sus și în jos pentru a face să apară legenda. Dacă lucrați cu parametrii de stil, cred că puteți obține niște efecte destul de drăguțe, dar, implicit, totul pare foarte simplu.

Cu acest efect, totul este simplu, subtitrările pentru imagini alunecă în dreapta sus sau în stânga jos, sub forma unei panglici cu un fundal întunecat translucid, totul este foarte simplu reformatat folosind proprietățile css.

O soluție interesantă: miniaturile sunt prezentate într-o formă întunecată; când treceți cu mouse-ul peste ele, imaginile apar și semnătura apare pe un fundal deschis.

Legenda pentru imagine apare din colț și se extinde în diagonală pe întreaga zonă a imaginii.

Câteva soluții mai interesante pentru implementarea subtitrărilor pop-up pentru miniaturile imaginilor. În editorul online, puteți experimenta parametrii și puteți obține rezultate mai impresionante.

Un set de efecte frumoase atunci când treceți cu mouse-ul peste miniaturi, diferite tipuri de aspect și design de subtitrări pentru imagini. Liniile subțiri, în contrast cu un fundal ușor întunecat, creează blocuri de informații ușor de citit.

Forme bizare și un efect de mărire combinat cu efectul animat al apariției subtitrărilor pentru miniaturile imaginilor.

Efecte minunate ale suprapunerii pictogramelor pe miniaturile imaginilor în diferite variante de aspect. Exemplul folosește un simbol (+) conturat într-un cerc folosind raza de margine: în CSS, puteți utiliza și fonturi de pictograme pentru a face panoul pop-up mai informativ.

Un exemplu de creare a unui efect de diapozitiv vizual pentru afișarea subtitrărilor 3D pentru imagini folosind numai CSS3 și HTML5.

6 Subtitrări pentru imagini

6 Opțiuni pentru apariția subtitrărilor de imagini pop-up la trecerea cu mouse-ul folosind CSS3. O lecție detaliată despre implementare și configurare, surse disponibile pentru descărcare.

Și, în cele din urmă, nu pot să nu menționez cel mai simplu mod de a crea o legendă pop-up pentru o miniatură folosind CSS3.

În primul rând, pentru cei care nu sunt încă complet sau deloc în materie, le voi explica pe scurt despre ce este vorba. Acestea sunt diferite tipuri de efecte (subtitrări pop-up, sfaturi cu instrumente, tranziții netede, transformare, rotație, mărire, deplasare etc., etc.) aplicate elementelor site-ului de pe ele cu cursorul mouse-ului. Acestea pot fi implementate fie folosind diverse plugin-uri jQuery, fie în pur.
Astăzi am pregătit o selecție largă de efecte originale de trecere cu mouse-ul pentru imaginile create folosind CSS3, fără a conecta biblioteci javascript. Nu voi vorbi despre avantajele și dezavantajele implementării efectelor hover în CSS3 pur, acesta este un alt subiect, doar uită-te la exemple și, dacă este necesar, folosește-l pe cel care îți place pe site-ul tău. Toate efectele prezentate în recenzie sunt furnizate cu un exemplu demonstrativ și documentație detaliată cu codurile sursă. Manualele sunt în mare parte în limbaj burghez, dar totul este mai mult sau mai puțin intuitiv.

Aș dori să vă atrag imediat atenția asupra faptului că toate aceste exemple vor funcționa corect numai în browserele moderne care acceptă proprietăți CSS3.

Pentru a nu strica imaginea de ansamblu, nu am distorsionat denumirile efectelor cu traducerea automată (cu excepția unora), am lăsat titlurile originale așa cum le-a numit dezvoltatorul.

Un efect foarte interesant atunci când treceți cu mouse-ul peste imagini în miniatură, folosind linii fine în design și tipografie. Mai multe tipuri diferite de efecte pentru apariția subtitrărilor imaginii, transformări 3D moi și neintruzive și tranziții netede ale pseudo-elementelor. Funcționează numai în browserele moderne.

iHover este o colecție impresionantă de efecte pur CSS3 hover, cu suport Bootstrap 3. Construit pe Scss CSS (fișier), ușor de modificat cu variabile. Codul este modular, nu este nevoie să includeți întregul fișier. Peste 30 de efecte diferite într-un singur pachet. Totul este destul de bine documentat și efectele sunt foarte ușor de utilizat. Tot ce trebuie să faceți este să creați corect marcajul HTML și să includeți fișierul CSS în lucrarea dvs.

Creează câteva efecte simple, dar elegante, pentru subtitrările imaginilor. Ideea este să plasați cursorul peste miniaturi pentru a face să apară titlul, numele autorului și butoanele de contact. Pentru unele efecte, sunt folosite transformări vizuale 3D.

Un efect de tranziție foarte simplu, fără clopoței și fluiere speciale, o imagine complet rotundă într-un cadru, se transformă prin schimbarea focalizării atunci când treceți cu mouse-ul și atât.

Efecte de trecere cu mouse-ul pentru miniaturi folosind CSS3

Dezvoltatorul își poziționează lucrarea ca exemplu de galerie de imagini cu efecte de tranziție atunci când apar adnotări (legendele) pe miniaturi. Se declară suport sigur de către browserele moderne, inclusiv IE 9+. Desigur, este dificil să o numim o galerie cu drepturi depline, dar efectul apariției semnăturilor este destul de interesant.

Un alt set de reguli CSS pentru a crea efecte de transformare impresionante atunci când treceți cu mouse-ul peste miniaturile perfect rotunde. Pachetul conține 7 tipuri de tranziții CSS3, documentație foarte detaliată despre configurare și utilizare. Efectele sunt acceptate de toate browserele moderne.

Rotiți miniaturile la trecerea cursorului

Un simplu efect de rotire a miniaturilor rotunde atunci când treceți cursorul mouse-ului peste ele, cam la fel puteți vedea pe blogul meu, în anunțurile postărilor de pe pagina principală. Implementat cu câteva linii de cod CSS.

Tradus literal: „Efect sexual când treci cu mouse-ul deasupra”. Desigur, este puțin probabil să observați ceva atât de sexy în acest efect, cu excepția cazului în care aveți o imaginație sălbatică, dar efectul este interesant în felul său și merită să îi acordați atenție.

Cinci efecte diferite pentru imagini când treci cu mouse-ul peste ele. Semnături pop-up în trei variante, perdele sub formă de modificare a gradului de transparență și rotație cu mișcare orizontală.

4 tipuri de efecte de animație pentru legendele imaginilor, implementate exclusiv folosind CSS3. Poziții diferite la apariție și efecte de tranziție, un design destul de standard. Pentru a înțelege cum funcționează animația, aruncați o privire la codul sursă al paginii demo; nu am găsit nicio documentație separată.

Galerii miniaturale dispuse in grila cu diverse efecte pentru aparitia semnaturii, rotatie, dezvoltare, pop-up etc. Documentația despre utilizare și configurare este destul de rară, dar dacă doriți cu adevărat, vă puteți da seama.

Acest efect nu este nimic special, o schimbare banală a luminozității imaginilor atunci când treceți cu mouse-ul, cu excepția faptului că au fost adăugate elemente de animație. Va trebui să vă dați seama singuri detaliile implementării prin stabilirea codului sursă al demo-ului.

Un alt set de 10 efecte de trecere cu mouse-ul pentru imagini, diverse modificări ale miniaturilor la trecerea cu mouse-ul, mărire, rotație, rotație, întunecare etc.

Diverse efecte de animație a cadrelor din jurul imaginilor arată destul de atractiv, există un manual detaliat pentru configurarea și utilizarea acestuia.

Efectele de trecere cu mouse-ul CSS3 originale utilizate pentru apariția eficientă a subtitrărilor în miniaturile imaginii atunci când sunt plasate. Setul de reguli CSS include 10 efecte diferite pe care le puteți utiliza separat pentru imagini diferite. Efectele sunt cu adevărat impresionante, mai ales având în vedere că totul a fost realizat folosind CSS3. Un ghid detaliat vă va ajuta să vă dați seama ce este.

Ideea este de a crea un SVG care este o formă de fundal pentru un text și se transformă într-o altă formă la trecerea mouse-ului. În acest fel, puteți face multe opțiuni diferite; în exemplu, sunt afișate trei tipuri de efecte de tranziție. Avantajul utilizării SVG este că putem redimensiona formularul pentru a se potrivi cu dimensiunea containerului părinte.

Imagini de alunecare

Esența acestui efect este că imaginea se mișcă în sus și în jos pentru a face să apară legenda. Dacă lucrați cu parametrii de stil, cred că puteți obține niște efecte destul de drăguțe, dar, implicit, totul pare foarte simplu.

Cu acest efect, totul este simplu, subtitrările pentru imagini alunecă în dreapta sus sau în stânga jos, sub forma unei panglici cu un fundal întunecat translucid, totul este foarte simplu reformatat folosind proprietățile css.

O soluție interesantă: miniaturile sunt prezentate într-o formă întunecată; când treceți cu mouse-ul peste ele, imaginile apar și semnătura apare pe un fundal deschis.

Legenda pentru imagine apare din colț și se extinde în diagonală pe întreaga zonă a imaginii.

Câteva soluții mai interesante pentru implementarea subtitrărilor pop-up pentru miniaturile imaginilor. În editorul online, puteți experimenta parametrii și puteți obține rezultate mai impresionante.

Un set de efecte frumoase atunci când treceți cu mouse-ul peste miniaturi, diferite tipuri de aspect și design de subtitrări pentru imagini. Liniile subțiri, în contrast cu un fundal ușor întunecat, creează blocuri de informații ușor de citit.

Forme bizare și un efect de mărire combinat cu efectul animat al apariției subtitrărilor pentru miniaturile imaginilor.

Efecte minunate ale suprapunerii pictogramelor pe miniaturile imaginilor în diferite variante de aspect. Exemplul folosește un simbol (+) conturat într-un cerc folosind raza de margine: în CSS, puteți utiliza și fonturi de pictograme pentru a face panoul pop-up mai informativ.

Un exemplu de creare a unui efect de diapozitiv vizual pentru afișarea subtitrărilor 3D pentru imagini folosind numai CSS3 și HTML5.

6 Subtitrări pentru imagini

6 Opțiuni pentru apariția subtitrărilor de imagini pop-up la trecerea cu mouse-ul folosind CSS3. O lecție detaliată despre implementare și configurare, surse disponibile pentru descărcare.

Și, în cele din urmă, nu pot să nu menționez cel mai simplu mod de a crea o legendă pop-up pentru o miniatură folosind CSS3.

Am vorbit despre această metodă într-una din lecțiile mele anterioare:.

Cu tot respectul, Andrew