3 Cool CSS3 Image Hover Effects

W nowoczesnych sieciach istnieje wiele technik, które można wykorzystać do tworzenia interesujących interakcji, ale najprostszym i najbardziej eleganckim jest zwykle CSS, a konkretnie dodatki dodane do CSS3.

Dawno temu musieliśmy polegać na JavaScriptu dla tego rodzaju efektu, ale dzięki stale rosnącej obsłudze CSS3 w różnych przeglądarkach, teraz można skonfigurować takie efekty bez żadnych skryptów. Istnieją niestety wciąż przeglądarki (IE9 i poniżej), które nie obsługują CSS3, więc albo będziesz potrzebować zastępstwa dla starszych przeglądarek, albo potraktuj efekt jako progresywne ulepszenie.

Dzisiaj przyjrzymy się, jak możemy zastosować fajne, ale schludne efekty, aby pokazać i ukryć podpisy z obrazami.

Jeśli wolisz śledzić kod, możesz to zrobić pobierz pliki tutaj.

Demo 1

Pierwsze demo jest naszym najprostszym: obraz powieje na prawo, by odsłonić podpis.

Znacznik

W naszym drugim hoście demo użyjemy bardzo podobnego znacznika do naszego pierwszego demo. Ale tym razem użyjemy demo-2 jako klasy i dodamy klasę zero :

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

CSS

Nasz CSS będzie prawie taki sam jak pierwsze demo, z tą różnicą, że tym razem przeniesiemy nasz obraz w dół o ustawienia od dołu do -96px. Użyjemy również przejścia CSS3, aby stworzyć płynny efekt:

.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

W naszym ostatnim demo stworzymy efekt flipowania kart. Oznacza to, że gdy najedziesz myszą na obraz, obrócisz go wokół osi, aby wyświetlić opis.