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

11 CSS Image Hovering Effects for Weebly

1

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: 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