TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Lägg till perspektiv Image Hover Effect i Weebly

1

Du kanske använder många bilder på din Weebly -webbplats men ville bara markera viktiga bilder för användarna på olika sätt för att locka dem. Till exempel kan du skapa en portföljs portföljsida och visa bilder av ditt arbete med projekt, fotografering, videor, etc. Att lägga till perspektiv -svävningseffekt till sådana portföljbilder fångar användarens uppmärksamhet och förbättrar engagemanget. I den här artikeln visar vi hur du lägger till perspektiv svävande effekt till bilder på din Weebly -webbplats. Nedan är ett exempel på bilden med svävande effekt och flytta musen över bilden för att se perspektiv svävande effekt.

Hur lägger man till perspektiv -svävande effekt till en bild?

Processen består av tre enkla steg:

  • Överför bild till din Weebly -webbplats
  • Lägger till CSS -kod
  • Lägger till HTML -kod

Steg 1 – Ladda upp en bild

Logga in på ditt Weebly -konto, välj webbplatsen du vill redigera och navigera till "Design> Redigera HTML / CSS". Klicka på knappen + som finns bredvid "Tillgångar" och välj sedan alternativet "Ladda upp fil (er)". Ladda upp bilden du vill lägga till sveveffekt. Läs mer om redigering av käll -CSS för Weebly -webbplats.

Lägg till perspektiv Image Hover Effect i Weebly

Ladda upp fil på Weebly -webbplatsen

Webbadressen till den uppladdade bilden ska vara- " http://yoursitename.weebly.com/files/theme/image-name.jpg ". Ersätt webbplatsen och bildnamnet med ditt i webbadressen.

Steg 2 – Lägga till CSS -kod för Hover Effect

Lägg till CSS -koden nedan under "Sidor> Välj sidan> Avancerade inställningar> Rubrikkod". Ersätt bildadressen med din egen bildadress från steg 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>

Steg 3 – Lägga till HTML

Det sista steget är att lägga till koden nedan på innehållsområdet i ett "Bädda in kod" -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>

Bilden kanske inte syns i Weebly -redigeraren, publicera din webbplats och håll muspekaren på bilden för att se att perspektivbildseffekten läggs till i bilden.

Letar du efter en bilddelningswidget tillsammans med perspektiv -sveveffekt som nedan?

Läs mer…

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer