Változás a kép, ha az egérmutató

Üdvözöljük, kedves barátaim. A mai cikkben szeretnék mondani, hogyan kell létrehozni az értelemben, hogy ha lebeg a kurzort a kép fölé, van egy változás az eredeti kép egy front.







És ma meg fogja tanulni, hogyan kell létrehozni ezt a hatást két különböző kép. Ez a módszer könnyebb végrehajtani, mert nem kell előzetesen hozzon létre egy kettős képet. Ön képes lesz arra, hogy megvalósítsa a hatás képekkel már feltöltötte a helyszínen korábban.

Hogy mi a hatása képeltolási

A lényege az egész hatás az, hogy a két kép helyezzük DIV blokk. Ez az egység van rendelve egy osztály vagy azonosítót, és minden kép hozzá van rendelve az osztályban. És akkor használja ezeket osztályok jönnek létre, css stílusokat az átmenet az egyik kép a másikra, ha lebeg a kurzort. És ez úgy valósul meg az átláthatóság ingatlanok (fedőképesség).

Előállítás html keretet ad a képnek

Tehát, azon a helyen, ahol szeretne létrehozni a kívánt hatást beszúrni ide a html keret:







hol van, természetesen változik a szélesség, magasság és a kép linkeket.
És akkor lehet lépni, hogy létre css stílusokat.

Készítsen css stílusokat

Ennek első példája van, hogy ilyen képek:

Példa 1 gomb

Példa gomb 2

Azt akarom, hogy megteremtse a hatását, amikor a gyűrű után jelennek mutatva a kurzort.

Először is, azt tegye html keret jelzi az utakat, hogy a fájlok és méretek:

Ahhoz, hogy a kívánt hatás eléréséhez a stíluslap fájlt ki kell egészíteni itt vannak a stílusok:

Mellesleg, a tulajdonságok a tartály szélessége és magassága állítható, mint egy részét, de ebben a kiviteli alakban, az árrés tulajdonság: 0 auto; Elveszti relevanciáját. Általában attól függően, hogy hol fog használni a Kép beszúrása, és a megfelelő tulajdonságokkal.

Ha a sima változás a kép akkor nem kell, távolítsa el ezeket a tulajdonságokat, vagy módosítsa az intervallum:

Ez csak egy ilyen egyszerű módon lehet létrehozni a hatása a kép megváltoztatása, ha lebeg a kurzort. Csak tartsd észben, meg kell dolgozni minden képet. Az egyetlen alkalom, amikor az azonos méretű képek, css tulajdonságokat akkor képes lesz arra, hogy egyszer regisztrálhat, és az összes kép kell majd helyezni a html keretben meghatározott korábban.




Kapcsolódó cikkek