Jak utworzyć efekt nakładki obrazu na zawisie?
Rodzaje efektów omówionych w tym poście są.
- Znikać
- Przesuń górę
- Zsuń dno
- Zjeżdżaj w lewo
- Przesuń w prawo
Dowiedzmy się, jak je wdrożyć za pomocą przykładów.
Przed skoczeniem w kierunku dodania jakiegokolwiek efektu nakładki obrazu najpierw wstawmy obraz na naszej stronie internetowej:
Html
W powyższym kodzie utworzyliśmy dwa kontenery Div. Pierwszy kontener Div z klasą „Div” trzyma obraz, a także inny kontener DIV, który utrzyma efekt nakładki obrazu, który pojawia się, gdy użytkownik unosi się nad obrazem.
Wyjście
Obraz został pomyślnie wstawiony na stronie internetowej.
Teraz, gdy uwzględniliśmy obraz, dowiemy się, jak dodać różne efekty nakładki obrazu podane na początku artykułu.
Efekt nakładki zanikania
W celu dodania efektu nakładki blaknięcia na obraz, postępuj zgodnie z poniższym kodem.
CSS
.obrazszerokość: 250px;
Wysokość: 250px;
.div
Pozycja: względny;
szerokość: 450px;
.narzuta
Pozycja: absolutna;
przejście: wszystkie 0.4s łatwość;
Krycie: 0;
.Div: Hover .narzuta
Krycie: 0.8;
.Fadeeffect
Wysokość: 250px;
szerokość: 250px;
TOP: 0;
po lewej: 100px;
kolor tła: Whitesmoke;
Po pierwsze, ustawiamy pewną szerokość i wysokość obrazu, a następnie dostosowujemy pozycję pierwszego kontenera Div jako względnego.
Po ustawieniu dwóch kontenerów Div używamy właściwości przejściowej, aby dać efekt przejściowy wszystkim elementom na czas trwania 0.4 sekundy w sposób „łatwy”. Tymczasem nieprzezroczystość przed efektem nachylenia została ustawiona na 0, podczas gdy użytkownik unosiła krycie efektu nakładki, ustawiono na 0.8.
Na koniec dajemy szerokość i wysokość efektem nakładki blaknięcia. Szerokość obrazu i wysokość przed i po zastosowaniu nakładki muszą być takie same, aby efekt był umieszczony dokładnie na obrazie. Użyliśmy również górnych i lewych właściwości, aby ustawić efekt dokładnie na obrazie i przypisaliśmy biały kolor dymu.
Wyjście
Z powodzeniem wdrożono efekt nakładki.
Przesuń najwyższy efekt nakładki
Rozważ poniższy kod, aby zrozumieć, jak dodać efekt nakładki Slajd na obraz.
CSS
.obrazszerokość: 250px;
Wysokość: 250px;
.div
Pozycja: względny;
szerokość: 450px;
.narzuta
Pozycja: absolutna;
przejście: wszystkie 0.4s łatwość;
Krycie: 0;
.Div: Hover .narzuta
Krycie: 0.8;
.Slidetopeffect
szerokość: 250px;
Wysokość: 0;
TOP: 0;
Racja: 100px;
kolor tła: Whitesmoke;
.Div: Hover .Slidetopeffect
Wysokość: 250px;
Styl i pozycja pojemników DIV i obraz to sama regulacja krycia efektu zawisowego.
W celu dodania efektu nakładki slajdowej do obrazu, ustawiliśmy szerokość efektu nakładki tak samo jak szerokość obrazu i umieszczać go na górze obrazu, użyliśmy górnych i prawych właściwości. Ponadto, aby przesunąć efekt z góry, dostosowaliśmy wysokość efektu nakładki do zera przed efektem zawisu. Jednak gdy użytkownik przyniesie mysz na obraz, wysokość efektu będzie taka sama jak na obrazie.
Wyjście
Slajd Top Overlay Efekt stworzony z wielką łatwością.
Zepsuć efekt nakładki
Below we have provided you the code with which we will add a slide bottom overlay effect on the image.
CSS
.obrazszerokość: 250px;
Wysokość: 250px;
.div
Pozycja: względny;
szerokość: 450px;
.narzuta
Pozycja: absolutna;
przejście: wszystkie 0.4s łatwość;
Krycie: 0;
.Div: Hover .narzuta
Krycie: 0.8;
.Slidebottomeffect
Wysokość: 0;
szerokość: 250px;
Dół: 3px;
po lewej: 100px;
kolor tła: Whitesmoke;
.Div: Hover .Slidebottomeffect
Wysokość: 300px;
Reszta kodu jest taka sama, jak użyta w powyższym przykładzie, aby umieścić efekt na wierzchu obrazu, którego użyliśmy dolnej i prawej właściwości oraz do przesuwania efektu od dołu, przypisujemy tę samą wysokość do efektu Jak obraz na zawisie.
Wyjście
Z powodzeniem dodano efekt nakładki zjeżdżalnie.
Slajd lewy efekt nakładki
Zapoznaj się z poniższym kodem, aby dodać efekt nakładki z slajdów na obrazie.
CSS
.obrazszerokość: 250px;
Wysokość: 250px;
.div
Pozycja: względny;
szerokość: 450px;
.narzuta
Pozycja: absolutna;
przejście: wszystkie 0.4s łatwość;
Krycie: 0;
.Div: Hover .narzuta
Krycie: 0.8;
.SLIDELEFTEFT
Wysokość: 250px;
szerokość: 0;
TOP: 0;
po lewej: 100px;
kolor tła: Whitesmoke;
.Div: Hover .SLIDELEFTEFT
szerokość: 250px;
W celu dodania efektu nakładki w lewo do obrazu ustawiliśmy wysokość na 250px, co jest tak samo jak wysokość obrazu i szerokości do 0px przed efektem zawisu. Tymczasem, aby poprawnie ustawić efekt na obrazie, użyliśmy górnej i lewej właściwości. I na koniec, po efekcie zawisu szerokość została ustawiona na 250px, co jest takie samo jak szerokość obrazu.
Wyjście
Slajd lewy efekt działa poprawnie.
Przesuń w prawej nakładce efekt
Ostatnim efektem nakładki, który zamierzamy zademonstrować, jest efekt z prawej strony. Postępuj zgodnie z poniższym kodem.
CSS
.obrazszerokość: 250px;
Wysokość: 250px;
.div
Pozycja: względny;
szerokość: 450px;
.narzuta
Pozycja: absolutna;
przejście: wszystkie 0.4s łatwość;
Krycie: 0;
.Div: Hover .narzuta
Krycie: 0.8;
.SLIDERIGHEFECT
Wysokość: 250px;
szerokość: 0;
TOP: 0;
Racja: 100px;
kolor tła: Whitesmoke;
.Div: Hover .SLIDERIGHEFECT
szerokość: 250px;
Aby utworzyć efekt nakładki w prawo na obraz, przypisaliśmy pewne wartości do góry, a właściwości prawe w międzyczasie utrzymanie wysokości efektu nakładki tak samo jak obraz i szerokość efektu do 0px przed efektem nachylenia. Jednak przy dodawaniu efektu nachylenia szerokość została dostosowana do 250px podobna do efektu obrazu.
Wyjście
Do obrazu z powodzeniem dodano efekt nakładki zjeżdżalnie.
Wniosek
Aby dodać efekty nakładki do obrazów, musisz umieścić je w pojemniku DIV i użyć różnych właściwości CSS, aby dodać na nich efekty nakładki. Dodanie tych efektów do obrazów może być interesującym sposobem na zwiększenie piękna stron internetowych. Istnieje wiele efektów nakładek, które można dodać do swoich obrazów, takich jak Fade, Slaje Top, Slajd w lewo i zsuń w prawo. Efekty te można dodać przy użyciu różnych właściwości CSS. Ten zapis pokazuje, jak dodać różne efekty nakładania obrazu na zawisie za pomocą odpowiednich przykładów.