TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

11 efektów unoszenia obrazu CSS dla Weebly

17

W naszym poprzednim artykule widzieliśmy, jak tworzyć nakładki obrazów po najechaniu kursorem, a w tym artykule dowiemy się, jak stworzyć proste efekty najechania obrazem dla Twojej witryny Weebly. Przejście właściwości CSS, transformacja, filtrowanie i nieprzezroczystość są używane do tworzenia efektu zawisu dla obrazów w witrynie Weebly. Możesz skopiować/wkleić cały kod widżetu w elemencie „Kod osadzania" lub dodać styl CSS w sekcji „Kod nagłówka”, a kod HTML w elemencie „ Kod osadzania ” na stronie.

Efekty unoszenia obrazu CSS dla Weebly

Dostępnych jest 11 różnych efektów – pomniejszanie, powiększanie, powiększanie, zmniejszanie, nasycanie, kontrast, jasność, skala szarości, rozmycie, odwrócenie kolorów i krycie. Poniżej przedstawiono kompletny kod CSS i HTML wraz z demo dla każdego stylu.

  • Pamiętaj, aby zastąpić URL obrazu własnym adresem URL obrazu. Możesz przesłać obrazy w sekcji „Zasoby”, użyć adresów URL z różnych stron w witrynie Weebly lub użyć adresów URL z innej witryny.
  • Możesz zmienić wartości skali, skali szarości, jasności, kontrastu itp. Za pomocą własnych wartości. Na przykład „-webkit-filter: jasność (0,25);” zmniejszy jasność do 25%, którą możesz zmienić na „-webkit-filter: jasność(1.25);” aby zwiększyć jasność do 125%.
  • Właściwość filtra nie jest obsługiwana w przeglądarce Internet Explorer.

Oto kompletny kod dla każdego typu efektu zawisu na obrazie. Podgląd można wyświetlić, najeżdżając myszką na obraz.

1 Powiększ obraz po najechaniu kursorem

<style> .cont1 { overflow:hidden; } .cont1:hover .image1 { -webkit-transform:scale(1); transform:scale(1); } .image1 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont1"> <img class="image1" src="Image-URL"> </div>

2 Pomniejsz obraz po najechaniu kursorem

<style> .cont2 { overflow:hidden; } .cont2:hover .image2 { -webkit-transform:scale(1); transform:scale(1); } .image2 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont2"> <img class="image2" src="Image-URL"> </div>

3 Powiększ rozmiar obrazu po najechaniu kursorem

<style> .image3 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image3:hover { -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <img class="image3" src="Image-URL">

4 Zmniejsz rozmiar obrazu po najechaniu kursorem

<style> .image4 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image4:hover { -webkit-transform:scale(0.7); transform:scale(0.7); } </style> <img class="image4" src="Image-URL">

5 Zmień nasycenie kolorów obrazu po najechaniu kursorem

<style> .image5 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image5:hover { -webkit-filter: saturate(4); } </style> <img class="image5" src="Image-URL">

6 Konwertuj obraz na skalę szarości po najechaniu kursorem

<style> .image6 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image6:hover { -webkit-filter: grayscale(100%); } </style> <img class="image6" src="Image-URL">

7 Zmień kontrast po najechaniu na obraz

<style> .image7 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image7:hover { -webkit-filter: contrast(160%); } </style> <img class="image7" src="Image-URL">

8 Zmień jasność po najechaniu na obraz

<style> .image8 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image8:hover { -webkit-filter: brightness(0.25); } </style> <img class="image8" src="Image-URL">

9 Zmień rozmycie obrazu po najechaniu kursorem

<style> .image9 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image9:hover { -webkit-filter: blur(5px); } </style> <img class="image9" src="Image-URL">

10 odwróconych kolorów obrazu po najechaniu kursorem

<style> .image10 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image10:hover { -webkit-filter: invert(100%); } </style> <img class="image10" src="Image-URL">

11 Zmień kolory krycia po najechaniu kursorem

<style> .image11 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image11:hover { opacity:0.6; filter: alpha(opacity=60); } </style> <img class="image11" src="Image-URL">

Ponieważ wszystkie te efekty są tworzone za pomocą ogólnego CSS, możesz użyć tych kodów na dowolnej stronie HTML. Na przykład jest to witryna WordPress i użyliśmy bloku „ Niestandardowy HTML ” w WordPress, aby zaprezentować wszystkie efekty nakładki obrazu CSS.

Źródło nagrywania: www.webnots.com

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów