ANIMOWANA GALERIA ZDJĘĆ ZA POMOCĄ CSS3

Animowana galeria zdjęć za pomocą Css3

Witam serdecznie! Tworząc nowe portfolio jak zawsze stanąłem przed dylematem – jaką galerię dodać do portfolio? Jednak bardzo zależy mi na tym aby nie dodawać kolejnych pluginów jQuery. Do głowy wpadł mi pomysł aby wykorzystać animacje Css3 i transform:scale.

Jak zrobić galerię zdjęć za pomocą Css?

Sprawa jest prosta. Utworzyłem diva z pięcioma zdjęciami:

<div id="galleryContainer">
<img src="http://www.pawelkaim.com/blog/wp-content/uploads/2013/09/kurs-html-css-strony-internetowe.jpg" alt="gallery image">
<img src="http://www.pawelkaim.com/blog/wp-content/uploads/2013/09/kurs-html-css-strony-internetowe.jpg" alt="gallery image">
<img src="http://www.pawelkaim.com/blog/wp-content/uploads/2013/09/kurs-html-css-strony-internetowe.jpg" alt="gallery image">
<img src="http://www.pawelkaim.com/blog/wp-content/uploads/2013/09/kurs-html-css-strony-internetowe.jpg" alt="gallery image">
<img src="http://www.pawelkaim.com/blog/wp-content/uploads/2013/09/kurs-html-css-strony-internetowe.jpg" alt="gallery image">
<div>

I do każdego zdjęcia dodałem animację i atrybut transform:scale na hover:


#galleryContainer {padding: 50px;}
#galleryContainer img{width: 200px;height:200px;}
#galleryContainer img:hover{-webkit-transform: scale(2, 2);-ms-transform: scale(2, 2);transform: scale(2, 2);transition-duration: 0.9s;-webkit-transition-duration: 0.9s; /* Safari */box-shadow: 5px 5px 5px #fefefe;}

I w ten o to sposób, otrzymałem galerię zdjęć, którą możecie sprawdzić pod tym linkiem.

2 myśli nt. „Animowana galeria zdjęć za pomocą Css3”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Anty-Spam Quiz: