11 CSS Image Hovering Effects for Weebly
I vår forrige artikkel så vi hvordan du lager bildeoverlegg på sveising, og i denne artikkelen vil vi sjekke hvordan du lager enkle bildehevende effekter for ditt Weebly -nettsted. CSS -egenskaper overgang, transformering, filtrering og opacitet brukes til å skape svevende effekt for bildene på Weebly -nettstedet. Du kan enten kopiere / lime inn den komplette widgetkoden inne i "Embed Code" -elementet eller legge til CSS -stilen under "Header Code" -delen og HTML -koden inne i " Embed Code " -elementet på siden.
CSS Image Hovering Effects for Weebly
Det er 11 forskjellige effekter å kontrollere – zoome ut, zoome inn, forstørre, krympe, mette, kontrast, lysstyrke, gråtoner, uskarphet, invertere farger og ugjennomsiktighet. Den komplette CSS- og HTML -koden sammen med demo for hver stil er vist nedenfor.
- Sørg for å erstatte Bilde-URL-en med din egen bilde-URL. Du kan enten laste opp bilder under delen "Eiendeler" eller bruke nettadresser fra forskjellige sider på Weebly -nettstedet ditt eller bruke nettadresser fra et annet nettsted.
- Du kan endre verdiene for skala, gråtoner, lysstyrke, kontrast, etc. med dine egne verdier. For eksempel "-webkit-filter: lysstyrke (0,25);" vil redusere lysstyrken til 25% som du kan endre til "-webkit-filter: brightness (1.25);" for å øke lysstyrken til 125%.
- Filteregenskapen støttes ikke i Internet Explorer.
Her er en komplett kode for hver type bilde -svevende effekt. Du kan se forhåndsvisningen ved å holde musepekeren på bildet.
1 Zoom inn bildet ved å sveve
<style>
.cont1 {
overflow:hidden;
}
.cont1:hover .image1 {
-webkit-transform:scale(1);
transform:scale(1);
}
.image1 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
border-radius: 15px;
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>
<div class="cont1">
<img class="image1" src="Image-URL">
</div>2 Zoom ut bildet ved å sveve
<style>
.cont2 {
overflow:hidden;
}
.cont2:hover .image2 {
-webkit-transform:scale(1);
transform:scale(1);
}
.image2 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
border-radius: 15px;
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>
<div class="cont2">
<img class="image2" src="Image-URL">
</div>3 Forstørr bildestørrelse ved sveising
<style>
.image3 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image3:hover {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>
<img class="image3" src="Image-URL">4 Krymp bildestørrelse ved sveising
<style>
.image4 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image4:hover {
-webkit-transform:scale(0.7);
transform:scale(0.7);
}
</style>
<img class="image4" src="Image-URL">5 Endre metning av bildefarger på svever
<style>
.image5 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image5:hover {
-webkit-filter: saturate(4);
}
</style>
<img class="image5" src="Image-URL">6 Konverter bilde til gråtoner på svever
<style>
.image6 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image6:hover {
-webkit-filter: grayscale(100%);
}
</style>
<img class="image6" src="Image-URL">7 Endre kontrast på Bildeoverføring
<style>
.image7 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image7:hover {
-webkit-filter: contrast(160%);
}
</style>
<img class="image7" src="Image-URL">8 Endre lysstyrke på Image Hover
<style>
.image8 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image8:hover {
-webkit-filter: brightness(0.25);
}
</style>
<img class="image8" src="Image-URL">9 Endre uskarphet i bildet ved å holde markøren
<style>
.image9 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image9:hover {
-webkit-filter: blur(5px);
}
</style>
<img class="image9" src="Image-URL">10 Inverter bildefarger på svever
<style>
.image10 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image10:hover {
-webkit-filter: invert(100%);
}
</style>
<img class="image10" src="Image-URL">11 Endre ugjennomsiktige farger på sveveren
<style>
.image11 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image11:hover {
opacity:0.6;
filter: alpha(opacity=60);
}
</style>
<img class="image11" src="Image-URL">Siden alle disse effektene er opprettet med generisk CSS, kan du bruke disse kodene på en hvilken som helst HTML -side. For eksempel er dette et WordPress -nettsted, og vi har brukt ” Custom HTML " -blokk i WordPress for å vise frem alle CSS -bildeoverleggseffekter.
Opptakskilde: www.webnots.com