CSS3-zoom-efekat

Poznato je da se uz pomoć jQuery-ja lako može napraviti zoom efekat na slikama, ali da li je to moguće postići samo uz pomoć  CSS-a?

Odgovor je DA. Može se dobiti potpuno isti efekat sa odličnim rezultatom, bez upotrebe JavaScript-a, sa mnogo manje koda i više responsive.

U ovom tutorijalu ćemo vam demonstrirati kako se takav efekat može lako napraviti uz pomoć CSS3, ali najpre da vidimo kako to izgleda uživo.

css-zoom-efekat

Da bi postigli efekat zumiranja slika iskoristićemo mogućnosti CSS3 transition svojstva.

Najpre ćemo uz pomoć CCS-a definisati početno stanje slike, a zatim i ponašanje kada se pređe kursorom preko slike. U početnom stanju definišemo svojstva na koja će se primeniti transition efekat, a zatim vrednosti koje treba da se pojave kada se pređe kursorom preko slike.

[css]
.zoom {
position:relative;
width:100px;
height:80px;
left:0px;
top:0px;
box-shadow: 0 0 6px rgba(50, 50, 50, 0.85);
transition: width 0.3s ease,height 0.3s ease,
left 0.3s ease,top 0.3s ease;
-webkit-transition: width 0.3s ease,height 0.3s ease,
left 0.3s ease,top 0.3s ease;
-o-transition: width 0.3s ease,height 0.3s ease,
left 0.3s ease,top 0.3s ease;
-moz-transition: width 0.3s ease,height 0.3s ease,
left 0.3s ease,top 0.3s ease;
}
.zoom:hover {
width:150px;
height:120px;
left:-25px;
top:-25px;
z-index:9999;
}
.ZoomIt ul {
clear:left;
}
.ZoomIt li {
width:102px;
height:82px;
margin:4px;
float: left;
overflow: visible;
display: block;
}
[/css]

Možete primetiti da više puta ponavljamo definisanje transition svojstva sa razlikom da koristimo -webkit-, -moz- i -o- prefikse, to je potrebno da bi primer funkcionsao i u drugim browser-ima (Mozilla, Chrome, Opera, …).

U HTML kodu, svaka slika (ili drugi element) koja ima klasu „zoom“ će imati zoom efekat:

[css]</pre>
<div class="ZoomIt">
<ul>
<li><img class="zoom" alt="" src="slika-1.jpg" /></li>
<li><img class="zoom" alt="" src="slika-2.jpg" /></li>
<li><img class="zoom" alt="" src="slika-3.jpg" /></li>
<li><img class="zoom" alt="" src="slika-4.jpg" /></li>
<li><img class="zoom" alt="" src="slika-5.jpg" /></li>
<li><img class="zoom" alt="" src="slika-6.jpg" /></li>
<li><img class="zoom" alt="" src="slika-6.jpg" /></li>
<li><img class="zoom" alt="" src="slika-8.jpg" /></li>
</ul>
</div>
<pre>
[/css]

Ovaj kod ce raditi na većini glavnih browser-a kao što su IE10, Firefox, Chrome, Opera

Mi smo definisali samo osnove funkcionisanja efekta, a ako vi imate nekih ideja lako ga možete unaprediti prema vašim željama. Ukoliko vam se svideo ovaj tutorijal možete ga podeliti i sa drugima.

Kompletan kod koji je potreban da bi se realizovao zoom efekat na slikama možete preuzeti na ovom linku.

Jovan Ivezic

E-business and internet marketing specialist.