3 Coola CSS3-bildhakeffekter
På den moderna webben finns det många tekniker som kan användas för att skapa intressanta interaktioner, men det enklaste och mest eleganta är vanligtvis CSS, och specifikt de tillägg som kom med CSS3.
Tidigare måste vi förlita oss på JavaScript för denna typ av effekt, men tack vare det ständigt ökande stödet till CSS3 över webbläsare är det nu möjligt att ställa in effekter som dessa utan att skript alls. Det finns tyvärr fortfarande webbläsare (IE9 och under) som inte stöder CSS3, så du behöver antingen en återgång för äldre webbläsare eller för att behandla effekten som en progressiv förbättring.
Idag ska vi titta på hur vi kan tillämpa snygga men snygga svängareffekter för att visa och dölja bildtexter.
Om du föredrar att följa med koden kan du ladda ner filerna här.
Demo 1
Den första demo är vår enklaste: bilden kommer att flyga till höger för att avslöja bildtexten.
Markeringen
För vår andra demo-html använder vi mycket liknande markup till vår första demo. Men den här gången kommer vi att använda demo-2 som klassen och lägga till nollklassen :
This is a cool title!
Lorem ipsum dolor sit amet.
CSS
Vår CSS kommer att vara nästan densamma som den första demoen, förutom att den här gången kommer vi att flytta vår bild nedåt genom att ställa in egenskapen botten till -96px. Vi använder också CSS3: s övergång för att skapa en smidig 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
För vår senaste demo skapar vi en blinkande korteffekt. Det innebär att när du svävar musen på bilden kommer den att snurra runt på sin axel för att avslöja beskrivningen.