Imagine pop-up când treceți cu mouse-ul peste un link. Efect de hover html css

O zi buna, prieteni! Acesta este un alt articol scris la cererea unuia dintre cititorii blogului meu. Astăzi implementăm capacitatea de a afișa o imagine atunci când treceți mouse-ul peste un link. De ce ar putea fi necesar acest lucru? Totul este foarte simplu, în felul acesta poți economisi spațiu pe site și în același timp poți revigora link-urile.

După cum știți, implementați poze pop-up posibil cu Ajutor jQuery, CSS și, de asemenea, HTML. In articolul de astazi voi posta cod gata acest efect și, de asemenea, da mai multe exemple ilustrative. Fiecare script este destul de simplu, creat folosind CSS+HTML. Nu te voi mai plictisi și îți voi oferi soluții gata făcute!

Imagine pop-up la trecerea cursorului

a.site-ssilka:hover+div

Permiteți-mi să explic pe scurt punctele principale. Pentru a afișa o imagine pop-up, trebuie să vă referiți la etichetă cu atributul src și după semnul egal între ghilimele, scrieți calea către imagine, după ce a încărcat-o anterior în folderul rădăcină site-ul.

Etichetă <а> Cu parametrul necesar href este responsabil pentru crearea și afișarea linkului (în exemplul meu, acesta este text).

Dacă elementele site-ului s-au mutat, puteți seta lățimea și înălțimea imaginii folosind proprietatea lăţimeȘi înălțime. Parametrii sunt specificați în pixeli.

Atributul alt permite motoarelor de căutare să recunoască mai precis ceea ce este descris într-o imagine.

Pentru o mai mare claritate, am evidențiat partea din cod pe care cel mai probabil doriți să o modificați.

Text pop-up când treceți cu mouse-ul peste un link

a.site-ssilka:hover+div

Fii curajos!!! Îndreptați cursorul spre mine!

După cum puteți vedea din exemplu, când treceți cu mouse-ul peste text, apare un sfat cu instrumente text.

Imaginea dispare când treceți cu mouse-ul peste un link

a.site-ssilka:hover+div

Fii curajos!!! Îndreptați cursorul spre mine!

Pentru a adăuga un anumit efect de mai sus, doar copiați codul care vi se potrivește și lipiți-l în editor de text. Astfel, un link cu o imagine pop-up/dispare poate fi plasat oriunde în articol.

Punct important! Fiecare dintre scripturile prezentate nu dăunează valabilității site-ului.

Mi se pare nu mai puțin convenabil să implementez sarcina prin adăugare scenariu special la fișierul de stil al șablonului, care se numește de obicei style.css.

Imagine pop-up CSS

poziție: relativă;

Miniatură:hover(

Interval miniaturi ( /*CSS pentru imaginea mărită*/

poziție: absolută;

culoare de fundal: #3d3d3d;

chenar: 1px alb solid;

vizibilitate: ascuns;

text-decor: niciuna;

chenar-rază: 4px 4px 4px 4px;

Moz-border-radius: 4px 4px 4px 4px;

Webkit-border-radius: 4px 4px 4px 4px;

Miniatura span img( /*CSS pentru imaginea mărită*/

lățime margine: 0;

Miniatură:hover span( /*CSS pentru imaginea mărită la hover*/

vizibilitate: vizibil;

stânga: 60px; /*poziția în care imaginea mărită ar trebui să fie decalată orizontal */

Pentru a afișa o fereastră pop-up când treceți cu mouse-ul peste un link, inserați următorul link în text:

În plus, un link cu o imagine pop-up poate fi inserat în o anumită parteșablonul dvs. Pentru a face acest lucru, adăugați următorul cod în fișierul index.php. Acesta este un fișier care definește aranjamentul vizual al elementelor site-ului.

Metoda de mai sus, deși simplu de implementat, are un anumit dezavantaj. Deoarece a doua imagine este încărcată numai când treceți cu mouse-ul peste link, imaginea este afișată cu o pauză. Pentru a elimina această întârziere, puteți utiliza nu două imagini, ci doar una.

Efect de rulare cu un model

S-ar părea că există o contradicție, deoarece efectul rulării este de a înlocui o imagine cu alta, atunci cum se poate descurca cu o singură imagine? De fapt, vor exista două imagini (Fig. 2), dar acestea vor fi stocate într-un singur fișier grafic.

Orez. 2. Imagine cu două poze

Schimbarea de la o imagine la alta are loc prin deplasarea verticală a imaginii utilizând proprietatea universală fundal sau poziția fundalului, așa cum se arată în exemplul 2.

Exemplul 2: Schimbarea poziției imaginii

HTML5 CSS 2.1 IE Cr Op Sa Fx

Pentru selectorul A, imaginea de fundal este setată prin proprietatea fundal, lățimea (lățimea) este aceeași cu imaginea, iar înălțimea (proprietatea înălțime) este egală cu jumătate din înălțimea imaginii. Ca rezultat, întreaga filă verde ar trebui să fie afișată inițial.

Bună, dragi prieteni. În articolul de astăzi vreau să vă spun cum să creați un efect în care atunci când treceți mouse-ul peste o imagine, imaginea originală se schimbă într-una falsă.

Există multe opțiuni pentru a crea un efect similar. Complexitatea efectului va diferi doar în construcția codului html și crearea stilurilor css.
Am descris deja efecte similare mai devreme în articolele mele, când am vorbit despre cum și.

Efectul de schimbare a imaginii în aceste articole este obținut prin crearea unei singure imagini care combină vizualizarea originală și vizualizarea de tip hover. Și controlul are loc datorită proprietăților de poziționare în stilurile css.

Astăzi veți învăța cum să creați acest efect folosind două imagini diferite. Această metodă este mai ușor de implementat, deoarece nu trebuie să creați imagini duble în avans. Veți putea implementa efectul cu imagini care au fost deja încărcate anterior pe site-ul dvs.

Pe ce se bazează efectul de schimbare a imaginii?

Esența întregului efect este că două imagini sunt plasate într-un bloc DIV. Acestui bloc i se atribuie o clasa sau un identificator, iar fiecarei imagini i se atribuie, de asemenea, propria sa clasa. Și apoi folosind aceste clase, stilurile CSS sunt create pentru a schimba o imagine cu alta atunci când treceți cursorul mouse-ului. Și acest lucru se realizează datorită proprietății de transparență ( opacitate).

Pregătirea unui cadru html pentru o imagine

Deci, în locul în care doriți să creați acest efect, trebuie să introduceți acest cadru html:

unde, desigur, modificați lățimea, înălțimea și linkurile către imagini.
Și apoi puteți trece la crearea stilurilor CSS.

Crearea stilurilor CSS

Ca prim exemplu, să luăm aceste imagini:

Vreau să creez un efect în care marginea apare după trecerea cursorului mouse-ului.

Mai întâi postez un schelet html care indică căile către fișiere și dimensiunile acestora:

Pentru a obține efectul dorit, trebuie să adăugați următoarele stiluri la fișierul foaie de stil:

/*Proprietăți pentru container*/#img_container (poziție:relativ; înălțime:114px; lățime:300px; margine:0 auto; cursor:pointer; ) /*Proprietăți pentru imaginea din container*/#img_container img ( poziție: absolut; stânga: 0; -webkit-tranziție: opacitate 0,5s ease-in-out; -moz-transition: opacitate 0,5s ease-in-out; -o-tranziție: opacitate 0,5s ease- tranziție in-out: opacitate 0,5s ease-in-out ) /*100% transparență când treci cu mouse-ul peste imagine*/#img_container img.img_bottom:hover ( opacitate:0; )

Apropo, în proprietățile containerului lățimea și înălțimea pot fi setate ca procente, dar în acest caz proprietatea margin:0 auto; își pierde relevanța. În general, în funcție de locul în care veți folosi inserarea imaginii, utilizați proprietățile corespunzătoare.

Dacă nu aveți nevoie de o schimbare lină a imaginilor, eliminați aceste proprietăți sau modificați intervalul:

Webkit-tranziție: opacitate 1s ease-in-out; -moz-tranziție: opacitate 1s ease-in-out; -o-tranziție: opacitate 1s ease-in-out; tranziție: opacitate 1s ease-in-out;

În acest mod simplu, puteți crea efectul schimbării imaginii când treceți cursorul mouse-ului. Rețineți că trebuie să lucrați cu fiecare imagine. Singurul aspect este că, dacă aveți imagini de aceeași dimensiune, atunci puteți înregistra proprietățile CSS o dată, iar toate imaginile vor trebui plasate în cadrul html specificat mai devreme.

Acum urmăriți tutorialul video în care vă arăt cum funcționează acest efect și o altă variantă a acestui efect. Când imaginea este schimbată prin rotire.

Atât, efectul simplu este gata, pune-l în funcțiune și aplică-l în proiectele tale. Noroc! Și ne vedem în articole noi.

Și iată arhiva promisă în tutorialul video.

Abonați-vă la articole noi!

Aplicarea diverselor efect de hover CSS pe imagine, link sau text este una dintre cele mai comune tehnici CSS.

În acest articol, am adunat o mulțime de efecte interesante de trecere cu mouse-ul CSS3. Le puteți aplica cu ușurință pe site-ul dvs. web sau în alte proiecte web. Să vedem ce ți-am pregătit.

1. 10 Efecte Hover elegante

După cum sugerează și numele, aceasta este o colecție de 10 efecte de hover incredibil de elegante.

Sursă

2. Efectul Hover conștient de direcție

Când treci mouse-ul peste diverse elemente, CSS trece efect de hover urmărește cursorul și creează prezentări 3D uimitoare.

Sursă

3. Efectul Wacom Hover

Acesta este deja un efect destul de ciudat, dar multor oameni încă se bucură de a-l folosi. Prezentarea este simplă, dar atractivă.

Sursă

4. Efecte Hover CSS3

Dacă sunteți în căutarea unor efecte de hover circulare, veți găsi unele interesante aici. Un total de 12 disponibile diverse CSS efecte de hover frame.

Sursă

5. Hover Animation de la UNIQLO

Acesta este un alt efect de hover interesant. Este ideal pentru miniaturi sau alte tipuri de imagini.

Sursă

6. Buton Hover Effects

Iată câteva efecte impresionante de hover pentru butoane. Toate sunt perfecte pentru site-uri de orice tip.

Sursă

7. 10 efecte uimitoare de hover

Un alt set de 10 efecte de hover CSS pentru butoane. Cele mai multe dintre ele sunt destul de impresionante.

Sursă

8. Efecte Hover CSS3 2

Aceasta este o colecție formată din patru diverse efecte trecând peste imagine. Numele și descrierea efectului sunt afișate împreună cu acesta.

Sursă

9. Bounce la Hover

Acesta este un efect de hover distractiv și interesant pentru imagini. Rama rotundă este ideală pentru aplicarea avatarurilor membrilor echipei și a imaginilor de recomandare.

Sursă

10. Hover pe 8 biți

Acest efect de hover CSS vintage vă va oferi un sentiment de nostalgie. Îl poți folosi pentru a crea stilul retro pentru site.

Sursă

11. Efect de trecere la titlul simplu

Când treceți mouse-ul peste o imagine, acest efect afișează titluri pe un fundal cu opacitate scăzută.

Sursă

12. Efectul Flip Down

Acesta este încă unul simplu, dar foarte frumos CSS efect de hover atunci când hover. Când treceți mouse-ul peste o imagine, aceasta afișează titlul și descrierea folosind un efect de glisare inteligentă.

Sursă

13. Premiul de curiozitate

Până nu treceți mouse-ul peste imagine, nu veți înțelege frumusețea acestui efect. Liniile aleatorii sunt frumos transformate într-un logo și apoi sunt pictate cu culori.

Sursă

14. Efectul Hover al imaginii

Acesta este un efect de hover CSS incredibil pentru cadrele de imagine. Modul în care o imagine apare față de alta este incredibil!

Sursă

15. Animație Hover

Când treceți cu mouse-ul peste imagine, opacitatea scade, concentrându-vă pe link.

Sursă

16. Hover Me Brother

Acesta poate să nu fie un efect de hover CSS foarte util, dar este distractiv. Doar treceți mouse-ul peste ochelari de soare și magia va începe.

Sursă

17. Efecte Hover Nautilus SCSS HAML

Acesta este un efect de hover creativ disponibil în mai multe variante. Ei ofera oportunități unice pentru proiectarea imaginilor.

Sursă

18. Efectul Hover Border SVG 1

Potrivit pentru text, butoane sau imagini. Recrearea treptată a cadrului este un efect cu adevărat interesant.

Sursă

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

Aveți nevoie de un efect de hover CSS pe hover pentru bara de căutare sau pictograma hartă? Acesta este exact el. Transformările sale fără întreruperi sunt pură plăcere pentru ochi.

Sursă

20. Panoul de pictograme sociale

Acest efect de hover poate fi aplicat pentru a ascunde pictogramele de la început social mediași apoi afișați-le când utilizatorul trece cu mouse-ul peste ele.

Sursă

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

Acest metodă grozavă furnizarea Informații suplimentare despre produsele din magazinul online. Când treceți cu mouse-ul peste imaginea unui produs folosind efect frumos sunt afișate informații despre acesta.

Sursă

22. Plic animat

Efect de trecere CSS perfect pentru „secțiune” conecteaza-te cu noi". Se afișează informații de contactîntr-un plic pop-up, dar numai după ce utilizatorul trece mouse-ul peste imagine.

Sursă

23. Înapoi la început

Acest efect unic de hover pentru butonul Înapoi în sus vă permite să oferiți vizitatorilor dvs. un indicator frumos, animat.

Sursă

24. Hover fantezist

Când treceți mouse-ul peste o imagine, aceasta nu numai că se mărește, dar și modul în care este afișată.

Sursă

25. Efectul Hover Pictogramă Mementouri

Acest efect de hover CSS adaugă stiluri frumoase imaginii.

Sursă

26. Hover imagine în cerc

Efect de hover pentru imagini circulare. Există patru stiluri diferite de efecte de hover în colecție.

Sursă

27. Efectul Hover Pictogramă Safari

Acest efect de trecere cu mouse-ul CSS recreează animația pictogramei Safari la hover. Puteți înlocui pictograma propria imagine sau logo.

) își schimbă de obicei aspectul (devine în focus). Cel mai adesea, aceasta este o simplă schimbare a culorii sau adăugarea unei subliniere. Se schimbă și cursorul de pe mână. În acest articol, vom arunca o privire mai atentă asupra modului de implementare frumos a schimbării stilului unui link pe hover.

Exemple cu modificarea aspectului unui link la trecerea cursorului

Exemplul 1: Cum să schimbați culoarea și sublinierea la trecerea cursorului

Când treceți cu mouse-ul, linkul va deveni roșu și va fi subliniat: legătură

Exemplul 2: Cum să schimbați fundalul unui link la trecerea cursorului

La trecerea cursorului, linkul își va schimba fundalul în albastru, iar culoarea linkului va deveni albă: legătură

Se convertește în următoarele pe pagină:

Exemplul 3. Cum să schimbați cursorul când treceți cu mouse-ul peste un link

În mod implicit, linkurile au o valoare cursorului de tip cursor :pointer . În exemplul următor îl vom schimba cu altceva.

La trecerea cursorului, linkul va deveni roșu și subliniat, iar cursorul va deveni un semn plus: legătură

Se convertește în următoarele pe pagină:

Exemplul 4: Modificări fluide ale stilului de link

Folosind proprietatea de tranziție, vom netezi viteza cu care se schimbă culoarea fundalului și a legăturii.

La trecerea cursorului, linkul își va schimba fundalul în albastru, iar culoarea linkului va deveni albă, cu totul netezit: legătură

Se convertește în următoarele pe pagină:

Exemplul 5. Subliniere frumoasă a linkului

Când treceți cu mouse-ul, linkul își va schimba culoarea și va apărea o subliniere neobișnuită: legătură

Se convertește pe pagină în următorul.