Kako Napraviti Zoom Efekat uz Pomoć CSS3


Kako Napraviti Zoom Efekat uz Pomoć CSS3

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.

.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;
}

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:

</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>

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.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest