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

Efectele de trecere cu mouse-ul oferă oricărui site un aspect dinamic și plin de viață. De obicei folosit pentru ei Cod JavaScript, dar odată cu apariția CSS3, puteți utiliza deja doar instrumente de stilare.

Efectele prezentate în acest material funcționează în browserele moderne. Suportul IE depinde de versiune și trebuie testat temeinic înainte de a îl utiliza într-un proiect real.

smucindu-se

Acest efect funcționează excelent atunci când aveți mai multe elemente aliniate orizontal. Deplasarea cursorului mouse-ului de-a lungul unei astfel de rigle generează un val.

Este foarte ușor de făcut. Pentru fiecare element este definit un câmp și când treceți cursorul mouse-ului, dimensiunea câmpului scade. Valoarea inițială Marja este de 15 px, este redusă la 2 px, ceea ce face ca imaginea să „sare în sus”. Acest efect poate fi folosit și pentru textul dintr-o listă.

Proprietatea de tranziție este folosită aici ca un plus, deoarece efectul arată grozav fără ea. Oferă un efect neted.

CSS

Ex1 img( chenar: 5px solid #ccc; float: stânga; margine: 15px; -webkit-transition: margine 0.5s ease-out; -moz-transition: margine 0.5s ease-out; -o-transition: margine 0.5s ease-out ) .ex1 img:hover ( margin-top: 2px; )

Pe măsură ce treceți mouse-ul peste fiecare imagine, aceasta crește încet în dimensiune, iar când pierdeți focalizarea, revine la dimensiunea inițială.

Pentru acest efect se folosește un set de imagini care măsoară 400x133 px. Acestea sunt apoi reduse în dimensiune în codul CSS la 300x100 px și extinse la trecerea cu mouse-ul. Se folosește centrarea orizontală, iar o imagine redimensionată ar putea strica totul, așa că se aplică o valoare a marjei negative de jumătate din lățime.

CSS

#container ( lățime: 300px; margine: 0 automat; ) #ex2 img( înălțime: 100px; lățime: 300px; margine: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o -tranziție: toate 1s ease ) #ex2 img:hover (înălțime: 133px; lățime: 400px; margin-left: -50px; )

Acest efect este foarte asemănător folosind JavaScript, când treceți mouse-ul peste un obiect, apare altul. Pentru a realiza acest lucru, imaginea și textul sunt plasate în același container div, apoi totul este deplasat spre stânga, astfel încât ambele elemente să fie la același nivel. Apoi aplicăm proprietățile culoare: transparentŞi înălțimea liniei: 0px Pentru element div. Aceasta plasează textul în partea de sus a div-ului și îl ascunde.

Pentru a face textul să apară peste mouse-ul, pur și simplu schimbăm culoarea și înălțimea liniei. Acest lucru creează efectul de manifestare a textului la scară.

CSS

#ex3 ( lățime: 730px; înălțime: 133px; line-height: 0px; culoare: transparent; font-size: 50px; font-family: „HelveticaNeue-Light”, „Helvetica Neue Light”, „Helvetica Neue”, Helvetica, Arial, sans-serif; text-transiție: majuscule: toate 0,5 s ease; img( float: stânga; margine: 0 15px; )

Acesta este unul dintre cele mai simple, dar foarte interesante efecte pentru o galerie în miniatură. Se bazează pe crearea unei matrice de imagini și pe rotirea imaginii peste care se află cursorul mouse-ului.

Există multe noi, specifice browserului, folosite pentru acest efect. Proprietăți CSS, deci nu va funcționa în browserele mai vechi. Galeria folosește umbre, tranziții și transformări.

Dacă doriți să diversificați și mai mult efectul, puteți utiliza pseudo-selectoare pentru a roti imaginile în unghiuri diferite și în direcții diferite.

CSS

#ex4 ( lățime: 800px; margine: 0 automat; ) #ex4 img (margine: 20px; chenar: 5px solid #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); 4px 4px rgba(0,0,0,0.2); -moz-tranziție: toate 0.5s ease; o-transforma: rotire(-7deg);

Acesta este un efect minunat și complex. Inițial, imaginile au o ușoară transparență Apoi, când cursorul mouse-ului trece peste el, transparența este complet eliminată și apar o strălucire în jurul acesteia și o reflexie (doar pentru browserele Webkit).

CSS

#ex5 ( lățime: 700px; margine: 0 automat; înălțime minimă: 300px; ) #ex5 img (margine: 25px; opacitate: 0,8; chenar: 10px solid #eee; /*Transformare*/ -webkit-transition: all 0,5 s ease; -moz-transition: toate 0.5s ease: toate 0.5s ease /*Reflection*/ -webkit-box-reflect: sub 0px -webkit-gradient; stânga jos, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); ) #ex5 img:hover ( opacitate: 1; /*Reflection*/ -webkit-box-reflect: sub 0px -webkit-gradient(liniar, stânga sus, stânga jos, de la(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); : 0px 0px 20px rgba(255,255,255,0.8);

Concluzie

Cele cinci efecte prezentate sunt doar un mic exemplu ce poți face cu CSS. Nu vă fie frică să experimentați. Combinându-se între ele elemente simple poti obtine rezultate impresionante.

Ideea de a separa prezentarea informațiilor de codul care le creează și le procesează a devenit radical nouă. Aceasta a fost o decizie puternică la acea vreme, dar acest punct nu a fost pe deplin recunoscut atunci. Când programarea s-a separat de un singur computer, dar nu a preluat rețeaua locală sau o singură zonă de domeniu, ci s-a răspândit imediat peste tot, abia atunci a devenit evident că prezentarea informațiilor (din punct de vedere al designului) și lucrul cu aceasta (din punct de vedere al cod) sunt două laturi în același plan.

Trei fațete ale dezvoltării site-ului web

Din punct de vedere formal, există trei componente principale (în forme sintactice diferite) care alcătuiesc un site web: cod PHP, cod JavaScript și descrieri Stiluri CSS. Nu contează deloc ce nume sau versiunea acestei sau acelei componente este folosită, ce Versiunea HTML marcajul utilizat și ce versiune a browserului este instalată. Compatibilitatea nu este ținută la mare cinste în zilele noastre, pentru că în fiecare moment de timp este relevant: ce este codificat și ce din ceea ce este codificat poate fi afișat și executat.

Dacă limbile anterioare s-au luptat pentru idei, astăzi producătorii de standarde în domeniul tehnologiilor Internet și al browserelor preferă să lupte în zadar.

Personale și publice

Există multe mijloace prin care Internetul este accesibil (calculatoare, laptopuri, tablete, smartphone-uri) și există și o mulțime de browsere. Nu există nicio garanție că un singur dispozitiv va afișa site-ul în forma în care dezvoltatorul l-a creat. Eforturile celor din urmă nu ating întotdeauna scopul și oferă designului web o singură diversitate, adică unitatea de afișare a esenței, oriunde este dezvăluită vizitatorului.

Separând personalul și publicul, folosind doar ceea ce funcționează în acesta din urmă, puteți obține un succes vizibil în design. Frumusețea, momentul artistic și designul web sunt destinul specialiștilor și talentelor relevanți. CSS este cod, deși unul foarte unic. Preocuparea lui este de a descrie stiluri (opțiuni de afișare a informațiilor). Odată cu venirea dispozitive mobile CSS-ul a fost încărcat cu codare reală sub formă de interogări media. Așadar, posibilitatea unei recăsătorii între design și cod nu este atât de nerealistă pe cât ar fi putut părea cu doar câțiva ani în urmă.

Când dezvoltă stiluri CSS, dezvoltatorul se bazează pe experiența sa personală dovedită și pe acele modele CSS care funcționează pe majoritatea browserelor și satisfac majoritatea vizitatorilor site-ului. Ar trebui să îl folosești pe primul cât mai mult și pe cel de-al doilea cât mai puțin, atunci există șanse mult mai mari de a obține un rezultat care funcționează aproape întotdeauna și peste tot.

Prima regulă: sperați în standard, dar nu greșiți singuri

CSS:hover este atunci când mouse-ul „intră” într-un element de pagină. Când mouse-ul face clic pe un element, acesta devine activ, dar când cursorul se deplasează în lateral, se poate schimba din nou și se poate afișa într-o stare activă. „:hover”, „activ” și „vizitat” sunt cele mai populare pseudoclase atunci când descriu stiluri.

Este foarte convenabil în codul site-ului să nu vă faceți griji cu privire la astfel de lucruri mici precum mutarea mouse-ului peste elemente. Prin furnizarea a două descrieri în tabelul de descriere de stil:

culoare de fundal: verde;

Primim atunci când treceți mouse-ul peste element schimbare automată colorarea textului din negru în alb și schimbarea fundalului acestui element în verde. Pseudo-clasele pot fi aplicate oricărui element și pot obține o mare varietate de efecte vizuale.

A doua regulă: atunci când ai încredere în standarde, concentrează-te pe codul tău

Totul ar fi bine dacă progresul ar rămâne la nivelul computerelor și laptopurilor echipate cu șoareci și progresul în comunicare celulară nu a condus la apariția smartphone-urilor, tabletelor și a altor dispozitive mobile la care conectarea unui astfel de dispozitiv este foarte problematică.

Pe de altă parte, doar la gadgeturile echipate cu un ecran tactil special devine posibilă manipularea directă a degetelor touch screen, așa cum a devenit deja comun pe smartphone-uri, tablete și dispozitive similare.

Există o diferență semnificativă și:hover aici nu funcționează deloc așa cum ne-am dori. Nu puteți face acest lucru fără cod, iar utilizarea interogărilor media nu rezolvă toate problemele.

Compatibilitatea este prea scumpă în zilele noastre lumea informației, prin urmare, pentru a asigura funcționalitatea corespunzătoare a site-ului în cadrul cerințelor stabilite pentru proiectarea web și implementarea funcționalității, este de preferat să ne concentrăm pe cazurile de utilizare minime necesare: CSS trece, CSS hover focus, CSS hover activ (vizitat). Cu cât mai mult cod (atât în browser, cât și pe server) controlează designul web, cu atât mai bine. Un program este control și este mai bine atunci când acest control nu este predat standardelor actuale, de la care adesea nu știi la ce să te aștepți.

Butoane și alte elemente ale paginii

Buton Hover CSS este o soluție minunată, dar în general fiecare element de pagină este un „buton”. Site-ul trebuie, în primul rând, să fie viu, iar dacă acest lucru nu este inclus în cod, dacă sarcina este de a crea un site care să se dezvolte adecvat domeniului de aplicare și să acționeze ținând cont de comportamentul vizitatorului, apoi, cel puțin folosind stiluri CSS, puteți adăuga vitalitate elementelor paginii.

Utilizarea efectelor hover este convenabilă. Cu ajutorul lor, puteți adăuga cu ușurință viață paginilor, dar codul nu știe ce face mouse-ul pe ecran dacă nu are capacitatea de a-și urmări mișcarea. Din acest punct de vedere, adică atunci când codul controlează mișcarea mouse-ului (= mișcarea degetului pe un smartphone), poate evidenția independent elementul sau îl poate transforma. Acest lucru nu are nimic de-a face cu pseudo-clasele, dar dă control deplin cod deasupra aspectului paginii, vă permite să o afișați în mod adecvat diverse dispozitiveîn diverse browsere.

Capcanele în foile de stil

Este imposibil să spunem că standardele din domeniul descrierii stilurilor CSS nu știu ce fac, dar este imposibil de spus că interacționează pe deplin cu alte standarde din domeniul programării pe Internet.

Stilurile și pseudoclasele pot fi descrise în etapa de codare a paginii, în momentul în care serverul generează pagina și în dinamică: fiind deja în interiorul browserului, puteți crea cu ușurință stil nou si schimba-l pe cel existent.

Folosind AJAX, atunci când nu este nevoie să regenerați pagina pentru a afișa o reacție la acțiunea unui vizitator, ci mai degrabă schimbarea elementului sau a mai multor elemente adaugă puțin „condiment”. „Prietenia” codurilor - ceea ce este deja în browser (JavaScript) și ceea ce este pe server (PHP) - este lotul autorului site-ului (programator).

Nu numai afișarea elementelor sale pe pagină, ci și percepția lor ulterioară de către cod depinde în mod semnificativ de modul în care este executat algoritmul pentru această interacțiune. Mai simplu spus, pseudo-clasele (în special) sunt foarte bune pentru condiții statice, un fel de iaht cu vele în mări limpede cu vânt ușor - totul este evident, accesibil și controlabil. Dacă vremea se schimbă, sau vântul se intensifică sau un vizitator provoacă o urgență, puteți lovi rapid reciful și pierdeți vizitatorul.

Standard și emularea acestuia

Hover poate fi emulat prin JavaScript utilizând evenimentele onmouseover și onmouseout. De multe ori aici se termină totul. Din punct de vedere al bunului simț, când despre care vorbim Când vine vorba de crearea unui site web cu adevărat funcțional, este mai bine să păstrați controlul în propriile mâini decât să-l lăsați la cheremul standardelor mitice care se schimbă în afara voinței și dorinței dezvoltatorului.

Uneori poți citi ceva de genul „ această oportunitate este disponibil chiar și în IE”, dar mai des puteți citi despre ce descrieri de stil sunt percepute de un anumit browser. Mult mai rar puteți afla despre cum diferă JavaScript în anumite browsere.

Evaluând experiența acumulată, admirând capacitățile Chrome și Opera, criticând încetineala și inerția browserului de la producător (de neuitat programator IE de la Microsoft, drag inimii fiecărui programator: „Bine vechi Internet Explorer Numai leneșii nu certau. Sau pe cineva care știe doar să joace Klondike pe computer.”- citat de la un autor necunoscut de pe Internet), ar trebui să rămâneți la mijlocul de aur: folosiți ceea ce funcționează oriunde și întotdeauna.

Oamenii au nevoie de fonduri pentru muncă, atunci când au nevoie de un fior, de obicei merg la biroul de înregistrare sau la teatru, dar nu la internet.

Emulare și control

Anterior, când programarea se punea pe picioare, era obișnuit să-ți asculți bătrânii și să scrii corect. În zilele noastre sunt prea mulți bătrâni, totul se schimbă prea repede și, dacă asculți pe toată lumea, nu va fi suficient timp nici măcar pentru foarte lucru simplu, către un site web minim funcțional.

Programarea este, în primul rând, control, iar în cazurile în care standardul stabilește regulile în mod părtinitor sau ne putem aștepta la o schimbare bruscă a regulii, la eliminarea acesteia și la apariția uneia noi, cea mai buna solutie Nu a fost întotdeauna să luăm nicio decizie, ci să implementăm funcționalitatea necesară a site-ului cu un cod minim posibil, dar efectiv funcțional.

În primul rând, pentru cei care nu sunt încă complet sau deloc în materie, le voi explica pe scurt despre ce este vorba. Acest diverse tipuri 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, iar pe unul curat.
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 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 pure 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 lucra.

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 miniaturii 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 cod 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.

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 imaginii la hover. Setul de reguli CSS include 10 efecte diferite pe care le puteți folosi 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. 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 o culoare translucidă. fundal întunecat, totul este foarte simplu reformatat folosind proprietăți 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.

Încă câteva 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.

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. Lecție detaliată privind implementarea și configurarea, 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.

După cum reiese deja din titlu, aici veți găsi o colecție formată din 10 incredibil de stilate efect CSS ov:

2. Efectul Hover conștient de direcție

Acest efect CSS3 incredibil vă va ajuta să obțineți un rezultat unic. Când treceți cu mouse-ul peste elementele paginii, efectul începe să urmeze indicatorul, creând un efect 3D incredibil:

3. Efectul Wacom Hover

În ciuda faptului că acest efect poate fi considerat pe drept cel mai comun, este încă capabil să atragă atenția:

4. Efecte Hover CSS3

Dacă aveți nevoie de efecte circulare în codul CSS3, atunci ați ajuns la locul potrivit! Sunt până la 12 dintre ele aici!

5. Animație Hover de la UNIQLO

Un alt efect de hover CSS care vă va permite să creați miniaturi incredibil de atractive sau să decorați orice imagine:

6. Buton Hover Effects

Vă aducem în atenție mai multe efecte atunci când treceți cu mouse-ul peste butoane. Toate sunt destul de atractive și sunt ideale pentru site-uri de orice tip:

7. 10 efecte uimitoare de hover

Un alt set format din 10 efecte CSS3 diferite. Cele mai multe dintre ele sunt foarte impresionante:

8. Efecte Hover CSS3 2

Această colecție include patru efecte diferite de trecere a imaginii CSS. Fiecare efect dezvăluie un titlu și o descriere:

9. Bounce la Hover

Un efect distractiv și interesant atunci când treceți cu mouse-ul peste imagini. Este potrivit pentru o secțiune de recenzii sau o listă de angajați cu fotografiile lor:

10. Hover pe 8 biți

Un efect în stil vintage care vă va aminti cu siguranță de trecut!

11. Efect simplu Hover Titlu

În ciuda numelui, acesta nu este un efect simplu. Afișează titlurile și modifică ușor nivelul de transparență la trecerea cursorului:

12. Efectul Flip Down

Un alt efect CSS simplu, dar foarte atractiv. Când treceți mouse-ul peste imagine, aceasta se întoarce, dezvăluind titlul și descrierea utilizatorului:

13. Premiul de curiozitate

Până nu treceți cursorul peste imagine, nu veți înțelege frumusețea efectului. Liniile aleatorii se aliniază instantaneu într-un logo, care este imediat decorat cu culoare:

14. Efectul Hover al imaginii

Trebuie să recunosc că acesta este cel mai interesant efect de hover CSS pe hover. Este incredibil cum o imagine dezvăluie alta!

15. Animație Hover

Un efect foarte simplu care încă reușește să impresioneze. Plasarea cursorului peste imagine provoacă o ușoară modificare a nivelului de transparență și mută focalizarea către link:

16. Hover Me Brother

Poate că nu este cel mai practic efect, dar cu siguranță este distractiv! Treceți peste ochelari de soare și magia începe!

17. Efecte Hover Nautilus SCSS HAML

Cu siguranță ar trebui să le încercați pe fiecare dintre ele, deoarece toate vă vor ajuta să vă faceți imaginile unice!

18. Efectul Hover Border SVG 1

Acest efect CSS unic este excelent pentru text, butoane sau imagini:

19. Treceți cu mouse-ul pe pictograma Căutare pe hartă

Nu știți cum să vă decorați pictogramele de căutare sau hartă? Atunci aceasta este soluția pentru tine! Transformările netede vor fi plăcute oricărui ochi:

20. Panoul de pictograme sociale

Efectul este grozav pentru ascunderea butoanelor rețelele sociale, care va fi afișat numai când treceți cursorul:

21. Informații despre adăugirile articolului de produs

Acest efect CSS vă va ajuta să afișați Informații suplimentare despre produsele din magazinul online:

22. Plic animat

Un efect de hover perfect pentru secțiunea de contact. Acest plic animat este afișat informații de contact asupra răspândirii. Dar acest lucru se întâmplă numai după trecerea cursorului:

23. Înapoi la început

Un efect de hover unic care vă permite să înlocuiți butonul tradițional „Sus” cu unul animat:

24. Hover fantezist

Sunt două efecte prezentate aici. Pe lângă mărirea imaginii, efectul modifică și zona de afișare atunci când treceți cu mouse-ul peste imagine:

25. Efectul Hover Pictogramă Mementouri

Acest efect CSS pentru site a fost inspirat de un videoclip dedicat OS X Yosemite:

26. Hover imagine în cerc

Un alt efect rotund aplicabil imaginilor circulare. Există patru stiluri diferite de hover disponibile aici:

27. Efectul Hover Pictogramă Safari

Acest efect este o recreare a animației pictogramei browser Safari. Puteți înlocui cu ușurință pictograma cu propria dvs. imagine sau logo.

Î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 cursorul mouse-ului peste ele. Aceste efecte pot fi implementate folosind diverse plugin-uri jQuery sau 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.

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 CSS3 pure, cu suport pentru 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.

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

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.

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ă.

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.

Efectele de trecere cu mouse-ul CSS3 originale utilizate pentru apariția eficientă a subtitrărilor în miniaturile imaginii atunci când treceți cu mouse-ul deasupra. 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

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 simbolul (+) conturat într-un cerc folosind raza-chenar: î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. O lecție detaliată despre implementare și configurare, 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 iar 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.