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 zoom efekat može lako napraviti uz pomoć CSS3, ali najpre da vidimo kako to izgleda uživo.
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.
