3 Soğuk CSS3 Görüntü Hover Etkileri
Modern web'de ilginç etkileşimler oluşturmak için kullanılabilecek çok sayıda teknik vardır, ancak en basit ve en zarif olanı genellikle CSS'dir ve özellikle CSS3 ile gelen eklemelerdir.
Eski günlerde, bu tür bir etki için JavaScript'e güvenmemiz gerekiyordu, ancak tarayıcılar arasında CSS3 için sürekli artan destek sayesinde, artık herhangi bir komut dosyası oluşturmadan bu gibi efektler oluşturmak mümkün. CSS3'ü desteklemeyen, hala hizli tarayicilar (IE9 ve altta) vardir, bu nedenle ya eski tarayıcılar için bir geri çekilmeye ya da efektin ilerici bir artirma olarak ele alinmasi gerekir.
Bugün, resim yazılarını göstermek ve gizlemek için havalı, ancak temiz havada gezinme efektlerini nasıl uygulayacağımıza bakacağız.
Kodu takip etmeyi tercih ederseniz, dosyaları buradan indirin.
Demo 1
İlk demo en basit olanıdır: resim, altyazıyı ortaya çıkarmak için sağa uçacaktır.
İşaretleme
İkinci demonuzun html'si için ilk demomuza çok benzer bir işaret kullanacağız. Fakat bu sefer demo-2'yi sınıf olarak kullanacağız ve sıfır sınıfını ekleyeceğiz:
This is a cool title!
Lorem ipsum dolor sit amet.
CSS
CSS'miz ilk demo ile hemen hemen aynı olacak, ancak bu kez görüntüyü aşağıya -96px değerine ayarlayarak görüntüyü aşağı doğru hareket ettireceğiz. Pürüzsüz bir etki yaratmak için CSS3'ün geçişini de kullanacağız:
.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}3. gösterim
Son demomuz için, saygısız bir kart efekti oluşturacağız. Bu, farenizi resmin üzerine getirdiğinizde, açıklamayı ortaya çıkarmak için kendi ekseni etrafında döneceği anlamına gelir.