Darmowe efekty CSS3 do kopiowania i wklejania

CSS to wspaniała technologia, dzięki której można stworzyć naprawdę ciekawe rzeczy. Używając "mocy" tej technologii można uzupełnić swoją stronę o bardzo atrakcyjne i przyciągające wzrok efekty wizualne. Więc dzisiaj porozmawiamy o CSS efektach hover dla zdjęć. Przygotowaliśmy listę tutoriali, które pomogą dodać dynamiczności do wyglądu projektu.


Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-książka]


Ten efekt można zastosować do dowolnego zdjęcia na blogu lub stronie, wystarczy dodać kilka wierszy kodu do pliku CSS. Więc, oto nasza lista:

***

Efekt Direction-Aware Hover

Demo

***

Efekt Circle Hover

Demo

 

***

Efekt Overlay

Demo

***

CSS3 efekty hover dla zdjęć

Demo

***

CSS3 efekty przejścia dla galerii zdjęć

Demo

***

CSS 3 efekty hover

Demo

***

Pop-up z efektem Hover CSS3

Demo

***

CSS efekty hover dla zdjęć

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.hover1 img {
     opacity: 0.5;
     filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
     zoom: 1; 
     -moz-transition: all 0.5s ease-out;  
     -o-transition: all 0.5s ease-out;  
     -webkit-transition: all 0.8s ease-out;  
     -ms-transition: all 0.5s ease-out;  
     transition: all 0.5s ease-out;
}
.hover1:hover img {
     opacity: 1;
     filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
     zoom: 1;
     -moz-box-shadow: 1px 1px 4px #000;
     -webkit-box-shadow: 1px 1px 4px #000;
     box-shadow: 1px 1px 4px #000;
}

***

6 efektów podpisów dla zdjęć

Demo

***

Animowane CSS3 efekty hover dla zdjęć

Demo

***

10 efektów hover dla zdjęcia

Demo

***

CSS3 Efekt hover dla obrazu z podpisem

Demo

***

5 CSS efektów hover

Demo

***

Efekt CSS Image Mouseover

1
2
3
4
5
6
7
8
9
10
a.cssmouseover {
display:block;
width:200px;
height:300px;
background-image:url(pathto/image.jpg);
background-position:0px 0px;
}
a.cssmouseover:hover {
background-position:0px -300px;
}

***

jQuery Zoom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Example:
$(document).ready(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});
 
// Using Colorbox with Zoom
$(document).ready(function(){
  $('a.photo').zoom({
    url: 'photo-big.jpg', 
    callback: function(){
      $(this).colorbox({href: this.src});
    }
  });
});

***

Efekt przybliżenia za pomocą jQuery i CSS3

Demo

***

Efekt Blur za pomocą CSS3 & jQuery

Demo

***

Szybki pokaz slajdów z efektem hover

Demo

***

WYŚWIETLANIE OBRAZU I PODGLĄD ZA POMOCĄ JQUERY

1
2
3
4
5
6
7
8
9
10
11
.ih_overlay{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background:#000;
    z-index:10;
    opacity:0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

 

Ten artykuł został przetłumaczony z angielskiego. Orygimał można znaleźć tutaj: Free CSS3 Hover Effects to Copy and Paste.


 * * *

P.S. Mam nadzieję, że spodobała Ci się nasza lista efektów. Jeżli masz jakieś inne ciekawe efekty CSS3, podziel się nimi w komentarzach poniżej.

Jeśli znalazłeś błąd ortograficzny, prosimy o poinformowanie nas o tym, wybierając odpowiedni fragment tekstu i naciskając Ctrl + Enter .

Zgłoś błąd w pisowni

Poniższy tekst zostanie przesłany do naszej redakcji: