3 Cool CSS3 Image Hover efekty
Na moderním webu existuje řada technik, které mohou být použity k vytváření zajímavých interakcí, ale nejjednodušší a nejvíce elegantní je obvykle CSS a konkrétně doplňky, které přicházejí s CSS3.
V minulých dnech jsme museli spoléhat na JavaScript pro tento druh efektu, ale díky stále rostoucí podpoře CSS3 v prohlížečích je nyní možné vytvářet efekty, jako jsou tyto bez jakéhokoli skriptování. Existují smutně ještě prohlížeče (IE9 a níže), které nepodporují CSS3, takže buď budete potřebovat záložní verzi pro starší prohlížeče, nebo budete považovat efekt za progresivní vylepšení.
Dnes se podíváme na to, jak můžeme aplikovat chladné, ale čisté efekty hoveru, abychom zobrazili a skryli titulky obrázků.
Pokud byste chtěli dodržovat kód, můžete Zde si stáhněte soubory.
Demo 1
První demo je naše nejjednodušší: obraz bude letět na jeho pravé odhalit titulky.
Označení
Pro naše html druhé demo použijeme velmi podobnou značku na první demo. Tentokrát však použijeme demo-2 jako třídu a přidáme třídu nuly :
This is a cool title!
Lorem ipsum dolor sit amet.
CSS
Naše CSS bude téměř stejné jako první demo, s tou výjimkou, že tentokrát posuneme náš obrázek dolů nastavením dolní části vlastnosti na -96px. Použijeme také přechod CSS3 k vytvoření hladkého efektu:
.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
Pro poslední ukázku vytvoříme efekt převrácené karty. To znamená, že když umístíte kurzor myši na obrázek, otočí se kolem jeho osy a objeví popis.