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.

Jedna myśl 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: