3 Cool CSS3 Image Swover Effects
På den moderne web er der mange teknikker, der kan bruges til at skabe interessante interaktioner, men den enkleste og mest elegante er normalt CSS, og specifikt de tilføjelser, der fulgte med CSS3.
Tilbage i gamle dage måtte vi stole på JavaScript for denne slags effekt, men takket være den stadigt stigende støtte til CSS3 på tværs af browsere er det nu muligt at oprette effekter som disse uden nogen scripting overhovedet. Der er desværre stadig browsere (IE9 og nedenfor), der ikke understøtter CSS3, så du vil enten have brug for en tilbagesendelse til gamle browsere eller for at behandle effekten som en progressiv forbedring.
I dag skal vi se på, hvordan vi kan anvende kølige, men pæne svæveffekter til at vise og skjule billedtekster.
Hvis du foretrækker at følge med koden, kan du download filerne her.
Demo 1
Den første demo er vores enkleste: billedet flyver til højre for at afsløre billedteksten.
Opmærkning
For vores anden demo-html bruger vi meget lignende markup til vores første demo. Men denne gang bruger vi demo-2 som klassen, og tilføjer nulklassen :
This is a cool title!
Lorem ipsum dolor sit amet.
CSS
Vores CSS vil være næsten det samme som den første demo, bortset fra at denne gang vil vi flytte vores billede nedad ved at indstille ejendommen ned til -96px. Vi bruger også CSS3's overgang for at skabe en jævn 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
Til vores sidste demo skaber vi en blinkende korteffekt. Dette betyder, at når du svæver musen på billedet, vil den dreje rundt på sin akse for at afsløre beskrivelsen.