Bună ziua, dragi prieteni. În articolul de astăzi, vreau să vă spun cum să creați un efect când, atunci când mutați cursorul mouse-ului peste o imagine, imaginea originală se schimbă într-o imagine falsă.
Și 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 în avans. Veți putea realiza efectul cu imaginile încărcate deja pe site-ul dvs.
Care este efectul modificării imaginii
Esența întregului efect este că două imagini sunt plasate într-un bloc DIV. Acest bloc este atribuit unei clase sau unui identificator, iar fiecare imagine este atribuită și propriei clase. Apoi, folosind aceste clase, stilurile css sunt create pentru a schimba o imagine în alta, în timp ce hovering cursorul mouse-ului. Și acest lucru se datorează proprietății de opacitate.
Pregătirea cadrului html pentru imagine
Deci, în locul în care doriți să creați acest efect, trebuie să inserați acest cadru html:
unde, desigur, schimbați lățimea, înălțimea și legăturile la imagini.
Apoi puteți continua să creați stiluri css.
Crearea stilurilor css
Ca un prim exemplu, luați aceste imagini:
Exemplu de buton 1
Exemplu de buton 2
Vreau să creez un efect când rama va fi afișată după trecerea cursorului mouse-ului.
Mai întâi plasez cadrul HTML cu calea spre fișiere și dimensiunile lor:
Pentru a obține efectul dorit în fișierul cu foi de stil, trebuie să adăugați aceste stiluri:
Apropo, în proprietățile containerului, puteți seta lățimea și înălțimea în procente, dar în acest caz proprietatea marjă: 0 auto; își pierde relevanța. În general, în funcție de locul unde veți folosi inserarea imaginilor, aplicați proprietățile corespunzătoare.
Dacă nu aveți nevoie de o schimbare netedă a imaginilor, eliminați aceste proprietăți sau modificați intervalul:
În acest mod simplu este posibil să se creeze efectul schimbării imaginii la trecerea cursorului unui mouse. Amintiți-vă, trebuie să lucrați cu fiecare imagine. Singura dată când aveți aceleași imagini de dimensiuni, proprietăți css va fi capabil să se înregistreze o dată, și toate imaginile vor trebui să fie plasate în cadrul HTML specificat mai devreme.
Articole similare
Trimiteți-le prietenilor: