TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Legg til perspektiv Image Hover Effect i Weebly

2

Du bruker kanskje mange bilder på Weebly -nettstedet ditt, men ønsket å markere bare viktige bilder for brukerne på en annen måte for å tiltrekke dem. For eksempel kan du opprette en presentasjonsporteføljeside og vise bildene av arbeidet ditt med prosjekter, fotografering, videoer, etc. Å legge til perspektiv -sveveeffekt til slike porteføljebilder fanger brukerens oppmerksomhet og forbedrer engasjementet. I denne artikkelen viser vi hvordan du legger til perspektiv svevende effekt på bilder på Weebly -nettstedet ditt. Nedenfor er et eksempel på bildet med svevende effekt og beveg musen over bildet for å se perspektiv svevende effekt.

Hvordan legge til perspektiv svevende effekt på et bilde?

Prosessen består av tre enkle trinn:

  • Laster opp bilde til ditt Weebly -nettsted
  • Legger til CSS -kode
  • Legger til HTML -kode

Trinn 1 – Last opp et bilde

Logg deg på Weebly -kontoen din, velg nettstedet du vil redigere, og naviger til "Design> Rediger HTML / CSS". Klikk på + -knappen som er tilgjengelig ved siden av "Assets", og velg deretter "Last opp fil (er)". Last opp bildet du vil legge til sveveeffekt. Finn ut mer om redigering av kilde -CSS for Weebly -nettstedet.

Legg til perspektiv Image Hover Effect i Weebly

Laster opp fil på Weebly -nettstedet

URL-en til det opplastede bildet skal være som " http://yoursitename.weebly.com/files/theme/image-name.jpg ". Erstatt nettstedet og bildenavnet med ditt i URL -adressen.

Trinn 2 – Legge til CSS -kode for Hover Effect

Legg til CSS -koden nedenfor under "Sider> Velg siden> Avanserte innstillinger> Overskriftskode" -delen. Erstatt bilde -URL -en med din egen bilde -URL fra trinn 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>

Trinn 3 – Legge til HTML

Det siste trinnet er å legge til koden nedenfor på innholdsområdet inne i et "Embed Code" -element.

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

Bildet er kanskje ikke synlig i Weebly -redaktøren, publiser nettstedet ditt og hold musen på bildet for å se at perspektivbildeeffekten er lagt til bildet.

Leter du etter en bildedelings -widget sammen med perspektiv -sveveeffekt som nedenfor?

Les mer…

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon