Dodaj efekt unoszenia obrazu w perspektywie w Weebly

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.

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…