TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Lisää Perspective Image Hover Effect Weeblyyn

6

Käytät ehkä paljon kuvia Weebly -sivustossasi, mutta halusit korostaa käyttäjille vain tärkeitä kuvia eri tavalla houkutellaksesi heitä. Voit esimerkiksi luoda esittelysalkun ja näyttää työsi kuvat projekteista, valokuvista, videoista jne. Lisäämällä perspektiivihiukratehosteen tällaisiin salkkukuviin kiinnität käyttäjän huomion ja parannat sitoutumista. Tässä artikkelissa näytämme, kuinka voit lisätä perspektiivin leijuva vaikutus Weebly -sivustosi kuviin. Alla on esimerkki kuvasta, jossa on leijuva vaikutus ja siirrä hiiri kuvan päälle nähdäksesi leijuva perspektiivivaikutus.

Kuinka lisätä perspektiivin leijuva vaikutus kuvaan?

Prosessi koostuu kolmesta yksinkertaisesta vaiheesta:

  • Kuvan lataaminen Weebly -sivustoosi
  • CSS -koodin lisääminen
  • HTML -koodin lisääminen

Vaihe 1 – Kuvan lataaminen

Kirjaudu sisään Weebly -tiliisi, valitse muokattava sivusto ja siirry kohtaan "Suunnittelu> Muokkaa HTML / CSS". Napsauta "Resurssit" -kohdan vieressä olevaa + -painiketta ja valitse sitten "Lataa tiedostot". Lataa kuva, johon haluat lisätä hover -tehosteen. Lisätietoja Weebly -sivuston lähdekoodin muokkaamisesta.

Lisää Perspective Image Hover Effect Weeblyyn

Tiedoston lataaminen Weebly -sivustolle

Ladatun kuvan URL-osoitteen tulisi olla seuraavanlainen: " http://yoursitename.weebly.com/files/theme/image-name.jpg ". Korvaa sivuston ja kuvan nimi omallasi URL -osoitteessa.

Vaihe 2 – CSS -koodin lisääminen Hover Effectille

Lisää alla oleva CSS -koodi kohtaan "Sivut> Valitse Sivu> Lisäasetukset> Otsikkokoodi". Korvaa kuvan URL -osoite omalla kuvan URL -osoitteellasi vaiheessa 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>

Vaihe 3 – HTML -koodin lisääminen

Viimeinen vaihe on lisätä alla oleva koodi Upotuskoodi -elementin sisältöalueelle.

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

Kuva ei ehkä näy Weebly -editorissa, julkaise sivustosi ja vie hiiri kuvan päälle nähdäksesi perspektiivikuvan tehoste lisätään kuvaan.

Etsitkö kuvanjako -widgettiä ja alla olevaa perspektiivihiukkasefektiä?

Lue lisää…

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja