3 Cool CSS3-bildebøyleffekter

På den moderne nettsiden finnes det mange teknikker som kan brukes til å skape interessante interaksjoner, men det enkleste og mest elegante er vanligvis CSS, og spesielt tilleggene som fulgte med CSS3.

Tidligere måtte vi stole på JavaScript for denne typen effekt, men takket være stadig økende støtte til CSS3 på tvers av nettlesere, er det nå mulig å sette opp effekter som disse uten noen skripting i det hele tatt. Det er dessverre fortsatt nettlesere (IE9 og under) som ikke støtter CSS3, slik at du enten trenger en tilbakebetaling for eldre nettlesere eller for å behandle effekten som en progressiv forbedring.

I dag skal vi se på hvordan vi kan bruke kule, men ryddige hovereffekter for å vise og skjule bilder bildetekster.

Hvis du foretrekker å følge med koden, kan du last ned filene her.

Demo 1

Den første demo er vår enkleste: bildet vil fly til sin rett for å avsløre bildeteksten.

Markeringen

For vår andre demo-html, bruker vi veldig lignende oppslag til vår første demo. Men denne gangen bruker vi demo-2 som klassen, og legger til nullklassen :

This is a cool title!
Lorem ipsum dolor sit amet.

CSS

Vår CSS vil være nesten det samme som den første demoen, bortsett fra at denne gangen vil vi flytte bildet nedover ved å sette inn egenskapen bunn til -96px. Vi bruker også CSS3s overgang for å skape en jevn effekt:

.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}

Demo 3

For vår siste demo, vil vi opprette en flipping-korteffekt. Dette betyr at når du svever musen på bildet, vil den rotere den rundt på sin akse for å avsløre beskrivelsen.