Lisää Perspective Image Hover Effect Weeblyyn
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.
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.