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

Dodaj efekt unoszenia obrazu w perspektywie w Weebly

15

Być może korzystasz z wielu obrazów w swojej witrynie Weebly, ale chcesz wyróżnić użytkownikom tylko ważne obrazy w inny sposób, aby ich przyciągnąć. Na przykład możesz utworzyć stronę portfolio z prezentacją i wyświetlać obrazy swojej pracy w projektach, fotografiach, filmach itp. Dodanie efektu najechania perspektywą do takich obrazów portfolio przyciąga uwagę użytkownika i poprawia zaangażowanie. W tym artykule pokazujemy, jak dodać efekt zawisu w perspektywie do obrazów w witrynie Weebly. Poniżej znajduje się przykład obrazu z efektem najechania i przesuń mysz nad obraz, aby zobaczyć efekt najechania w perspektywie.

Jak dodać efekt unoszenia perspektywy do obrazu?

Proces składa się z trzech prostych kroków:

  • Przesyłanie obrazu do witryny Weebly
  • Dodawanie kodu CSS
  • Dodawanie kodu HTML

Krok 1 – przesyłanie obrazu

Zaloguj się na swoje konto Weebly, wybierz witrynę, którą chcesz edytować i przejdź do „Projekt > Edytuj HTML / CSS". Kliknij przycisk + dostępny obok „Zasoby”, a następnie wybierz opcję „Prześlij plik(i)”. Prześlij obraz, do którego chcesz dodać efekt najechania. Dowiedz się więcej o edytowaniu źródłowego kodu CSS witryny Weebly.

Dodaj efekt unoszenia obrazu w perspektywie w Weebly

Przesyłanie pliku do witryny Weebly

Adres URL przesłanego obrazu powinien mieć postać – „ http://nazwa-witryny.weebly.com/files/theme/nazwa-obrazu.jpg “. Zastąp nazwę witryny i obrazu swoją w adresie URL.

Krok 2 – Dodanie kodu CSS dla efektu najechania

Dodaj poniższy kod CSS w sekcji „Strony > Wybierz stronę > Ustawienia zaawansowane > Kod nagłówka”. Zastąp adres URL obrazu własnym adresem URL obrazu z kroku 1.

<style type="text/css"> .thumb { width: 400px; height: 300px; margin: 70px auto; perspective: 1000px; } .thumb a { display: block; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"); background-size: 0, cover; transform-style: preserve-3d; transition: all 0.5s; } .thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;} .thumb a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; background: inherit; background-size: cover, cover; background-position: bottom; transform: rotateX(90deg); transform-origin: bottom; } .thumb a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px Montserrat; text-align: center; transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } .thumb a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb:hover a:before { opacity: 1; box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); transform: rotateX(0) translateZ(-60px) scale(0.85); } </style>

Krok 3 – Dodanie HTML

Ostatnim krokiem jest dodanie poniższego kodu w obszarze zawartości wewnątrz elementu „Kod osadzania”.

<div class="thumb"> <a href="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"> <span>KungFu Panda</span> </a> </div>

Obraz może nie być widoczny w edytorze Weebly, opublikuj swoją witrynę i najedź myszą na obraz, aby zobaczyć, jak do obrazu został dodany efekt obrazu w perspektywie.

Szukasz widżetu udostępniania obrazów wraz z efektem najechania perspektywą, jak poniżej?

Czytaj więcej…

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

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