10 enkla bildhakeffekter du kan kopiera och klistra in

Höger effekter är alltid ett roligt ämne att utforska. Tidigare har vi byggt några fantastiska exempel på CSS-hovers som var lätta att kopiera och klistra in direkt i din kod.

Idag följer vi upp det med tio nya effekter som är speciellt byggda för användning med bilder. Varje exempel kommer med ett HTML- och CSS-kod som du kan stjäla och en live demo så att du kan se den i åtgärd.

Sneak Peek

Innan vi börjar, ta en titt på demo nedan för att se alla de olika svängverkningarna som vi ska bygga.

demo: Klicka här för att starta.

Inrätta

Innan vi börjar skapa individuella demoer krävs en viss grundläggande inställning. Här är en bit av CSS som vi ska använda för att diktera det grundläggande utseendet på alla exemplen.

* {-webkit-box-size: border-box; -moz-box-size: border-box; -ms-box-dimensionering: gränslåda; box-dimensionering: gränsvärde; } kropp {bakgrund: # 333; } .pic {border: 10px solid #fff; flyta till vänster; höjd: 300px; bredd: 300px; marginal: 20px; överflöde: gömd; -webkit-box-skugga: 5px 5px 5px # 111; boxskugga: 5px 5px 5px # 111; }

Det mesta av detta är grundläggande saker: box-dimensionering gör det möjligt för oss att manipulera boxmodellen (gärna tillämpa mer specifikt om du inte gillar universalväljaren) och bildklassen ger oss en plats att kasta i någon generisk styling för varje foto.

Zooma och panorera

Vår första grupp av effekter innebär att använda några knep med dold överflöde. Genom att klippa bilden till gränserna för en div, kan vi dra av några ganska coola svängar.

Här är en demonstration av de fyra svängverkningarna i åtgärd:
demo: Klicka här för att starta.

Växa

För att börja, gör vi det så att när användaren svänger över bilden förstoras fotot medan det fortfarande ligger inom gränserna, vilket resulterar i en zoomning i kraft. Här är HTML.

html

<img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_4.jpg"> <p>Vi har sett hur man kan odla en bild på svävaren, så låt oss vända den effekten och zooma ut fotot. Metoden är ungefär exakt densamma, bara den här gången börjar du med storleken vid 400px och krympa den till 300px på svävaren. </p> <p><strong>html</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_5.jpg"> <p>Nästa effekt håller bilden lika stor genom hela, men pannar den i sidled när användaren svävar. Som du kan se i vårt sparka exempel är det här ett bra sätt att förmedla en känsla av handling.</p> <p><strong>html</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_6.jpg"> <p>En vertikal pan kan också vara cool. Återigen använder jag den här effekten för att ge en känsla av rörelse, men det här är också bra för att kommunicera höjd om du vill panorera upp något som en hög byggnad. Klippan i vårt foto bidrar till att driva detta koncept. </p> <p><strong>html</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_7.jpg"> <h3>Luta</h3> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_8.jpg"> <p>Den här är super enkel, allt vi ska göra är att rotera bilden något när användaren svänger över den. Resultatet är en grundläggande men rolig illusion av en krökt hängande bild. </p> <p><strong>html</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_9.jpg"> <p>Det är här den galen kommer in. Bilden ovan gör inte riktigt den här rättvisan, så var säker på att kolla in demoen. Vad som händer är att när användaren svävar börjar bilden att snurra. När den spinner, morphs den från en fyrkant till en cirkel. Resultatet är super kul att leka med. </p> <p><strong>html</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_10.jpg"> <p>Här är en annan konstig som använder gränsen för att avrunda bilden. Den här gången kommer vi inte bara att öka gränsen radie men även dess tjocklek. Kombinerat med <em>border-box</em>, detta kommer att skapa en effekt som fokuserar på på en viss del av en bild. </p> <p><strong>html</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_11.jpg"> <h3>Fläck</h3> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_12.jpg"> <p>Den första effekten vi går för är en enkel suddighet. Långt har man försökt att blura pixlar med CSS ensam och nu är det äntligen möjligt med en liten kodlinje!</p> <p><strong>html</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_13.jpg"> <p>Den här gången kommer vi att släppa all mättnad ut ur bilden på svävaren. Det brukade ta två bilder för att dra av den här effekten, men med Webkit-filter kan vi klippa ner det här till en. </p> <p><strong>html</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_14.jpg"> <p>För vårt sista knep kommer vi att mörka ett foto som standard och sedan lysa upp det till dess normala tillstånd på svävaren. Detta skapar en slags avslöjande effekt. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/http://lorempixel.com/300/300/technics/2"> / * DARKEN * / .brighten img {-webkit-filter: ljusstyrka (-65%); -webkit-övergång: alla 1s lättnad; -moz-övergång: alla 1s lättnad; -o-övergång: alla 1s lättnad; -ms-övergång: alla 1s lättnad; övergång: alla 1s lätt; } .brighten img: sväva {-webkit-filter: ljusstyrka (0%); }

Här är 0% vanlig ljusstyrka. Något ovanför och du lyser bilden, något nedanför och du mörkar det. Vi började på -65% och tog upp det till 0% på svävaren.

Stjäla dem!

Exemplen ovan är alla avsedda för att du ska stjäla och använda som du vill i ditt eget arbete, så var noga med att bokmärke denna sida och kom tillbaka till den nästa gång du letar efter en intressant CSS-svängareffekt.