Jak powiększyć obraz na myszy unoszący się za pomocą CSS

CSS „przemiana„Właściwość służy do dodawania wpływów na różne elementy HTML, takie jak zmiana szerokości, wysokości, wielkości i pozycji elementów. Korzystając z tej właściwości, możesz również powiększyć obraz na myszy na zawisie z kombinacją właściwości transformacji i: zawieszki pseudoklasy.

Celem tego artykułu jest nauczenie procedury powiększenia obrazu na podatkowaniu myszy. A więc zacznijmy!

Jak powiększyć obraz na myszy unoszący się za pomocą CSS?

„„przemiana" I "przekształcać„Właściwości CSS są używane do powiększenia obrazu na podatku myszy. Przed wskoczeniem do wdrożenia omówimy wspomniane właściwości jeden po drugim!

Właściwość CSS „przejściowa”

„„przemiana„Własność jest wykorzystywana do zmiany wartości właściwości CSS, takich jak szerokość, wysokość, krycie i transformacja w określonym czasie. Jest to krótka własność czterech innych nieruchomości.

Sprawdź składnię właściwości przejściowej.

Składnia

Przejście: Przejście przejściowe przejście
Przejście-rentowność funkcji przejściowej opóźnienie

Opis wymienionych powyżej właściwości podano poniżej:

• przejściowa-proporcja: Jest wykorzystywany do ustawienia przejścia na dowolną właściwość CSS, taką jak szerokość, wysokość, krycie, transformacja i wiele innych.

• Przejście: Jest wykorzystywany do dostosowania czasu trwania przejścia.

• funkcja przejściowa: Służy do ustawienia prędkości przejścia.

• Transition-Delay: Określa, kiedy przejście rozpoczyna się lub opóźnia.

Właściwość CSS „Transform”

Do transformacji 2D i 3D elementów HTML stosuje się właściwość „transformacji” CSS. Korzystając z tej właściwości, możesz zmodyfikować kształt i rozmiar elementów. Pozwala również na obracanie, wypaczenie i skalowanie elementu.

Składnia

Składnia „przekształcać„Nieruchomość to:

Transform: Brak | Funkcje transformacji

Opis właściwości transformacji podano poniżej:

• nic: Służy do ustawiania transformacji elementów.

• funkcja transformacji: Jest wykorzystywany do ustawienia funkcji właściwości transformacji, takiej jak rotate (), skew (), tłumacz () i scale (). Ponadto funkcja Scale () zmienia element w kierunku poziomym i pionowym.

Przykład 1: Powiększ obraz na poduszaniu myszy

Aby powiększyć obraz na uniesieniu myszy, najpierw dodaj obraz w HTML, a następnie zastosuj do niego efekt zawisowywania.

Krok 1: Dodaj obraz w div

Aby powiększyć obraz na unoszeniu myszy za pomocą CSS, najpierw dodamy obraz w „div". Aby to zrobić, użyj znacznika i ustaw źródło obrazu jako "obraz.PNG ” w środku .

Html

Krok 2: Style Div

W CSS użyjemy „div„Aby uzyskać dostęp do div, który utworzyliśmy w HTML, a następnie ustaw wysokość div jako„250px”I kolor tła jako„RGB (134, 240, 227)". Ponadto dostosujemy granicę wokół div, ustawiając szerokość jako „10px”, styl jako „grzbiet” i kolor jako „RGB (2, 141, 127)”.

CSS

div
Wysokość: 250px;
Tło: RGB (134, 240, 227);
granica: 10px Ridge RGB (2, 141, 127);

Krok 3: Ustaw pozycję obrazu i zastosuj właściwość „przejścia”

W następnym kroku ustaw położenie obrazu, używając wyściółki jako „80px” i „160px”. Użyjemy szerokości jako „150px„Aby dostosować rozmiar obrazu. Następnie zastosuj właściwość przejściową do obrazu, ustawiając wartość właściwości przejściowej jako „transformuj” i czas przejścia jako „0s”:

img
Wyściółka: 80px 160px;
szerokość: 150px;
przejście: transformacja 0s;

Uwaga: Wartości wyściółki są ustawione jako „80px”Reprezentuje wyściółkę od góry i dolną i„160px”Wskazuje wyściółkę od lewej i prawej.

Krok 4: Powiększ obraz za pomocą właściwości „Transform” na zawisie

Teraz użyjemy „.IMG: Włóż„Aby połączyć obraz z pseudoklasy zawisu. W rezultacie najemnik zostanie zastosowany do obrazu. Następnie, aby powiększyć obraz na myszy, wykorzystamy właściwość transformacji i ustawić wartość funkcji skali jako „(1.9)„Aby zmienić rozmiar obrazu zarówno w kierunku poziomym, jak i pionowym:

IMG: Hover
Transform: Skala (1.9);

Jak widać, obraz jest powiększany, gdy mysz się na nim przekroczy:

Przejdźmy do następnego przykładu, w którym będziemy powiększyć GIF na podatkowaniu myszy.

Przykład 2: powiększ GIF na poduszaniu myszy

Najpierw dodamy GIF w HTML za pomocą znacznika i określamy jego źródło GIF jako „Gif.Gif”:

Stylikujemy DIV tak samo jak poprzedni przykład. Następnie ustaw położenie GIF za pomocą wyściółki jako „50px" I "200px”:

img
Wyściółka: 50px 200px;
szerokość: 150px;
przejście: transformacja 0s;

Następnie użyjemy „IMG: Włóż”I ustaw wartość funkcji skali jako„1.6”:

IMG: Hover
Transform: Skala (1.6);

Po tym GIF będzie się powiększać, gdy mysz się na nim zakończy:

Otóż ​​to! Omówiliśmy metodę powiększenia obrazu na myszy.

Wniosek

Aby powiększyć obraz na podatku myszy „Przejście” i „transformuj” stosowane są właściwości CSS. Najpierw zastosuj właściwość przejścia na obraz i ustaw wartość jako transformację. Następnie w „:unosić się„Pseudo-klasę, użyj właściwości transformacji i ustaw wartość funkcji Scale (). W tym podręczniku nauczyliśmy się metody powiększenia obrazu na myszy unoszącym się za pomocą CSS i podać jej przykłady.