TutorialBlog
Tutorijali,skripte i druge korisne stvari za blog
utorak, 26. ožujka 2013.
Zumiranje slika
Primjer:
Predji misem preko slicica:
Kopiraj i zalijepi u css:
.zit { position:relative; width:100px; height:80px; left:0px; top:0px; border:1px solid black; /* Apply a CSS3 Transition to width, height, top and left properties */ 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; } .zit: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; }
Kopiraj i zalijepi gdje zelis da se slicice pojave:
<div class="ZoomIt"> <ul> <li><a href="http://www.slapix.com/lol/i_gots_my_eye_on_you.aspx" title="I gots my eye on you"><img class="zit" src="http://www.slapix.com/img/i2m/i_gots_my_eye_on_you.jpg" /></a></li> <li><a href="http://www.slapix.com/lol/take_my_advice.aspx" title="Paul McCartney"><img class="zit" src="http://www.slapix.com/img/i2m/take_my_advice.jpg" /></a></li> <li><a href="http://www.slapix.com/lol/the_greatest_gift_of_all_is.aspx" title="George Harrison"><img class="zit" src="http://www.slapix.com/img/i2m/the_greatest_gift_of_all_is.jpg" /></a></li> <li><a href="http://www.slapix.com/lol/i_ll_never_be_perfect.aspx" title="I'll never be perfect"><img class="zit" src="http://www.slapix.com/img/i2m/i_ll_never_be_perfect.jpg" /></a></li> </ul> <ul> <li><a href="http://www.slapix.com/lol/where_s_my_hug_today.aspx" title="Where's my hug today"><img class="zit" src="http://www.slapix.com/img/i2m/where_s_my_hug_today.jpg" /></a></li> <li><a href="http://www.slapix.com/lol/i_m_nice_until_you_screw_it_up.aspx" title="I'm a nice person"><img class="zit" src="http://www.slapix.com/img/i2m/i_m_nice_until_you_screw_it_up.jpg" /></a></li> <li><a href="http://www.slapix.com/lol/karma_has_no_deadline.aspx" title="Karma has no deadline"><img class="zit" src="http://www.slapix.com/img/i2m/karma_has_no_deadline.jpg" /></a></li> <li><a href="http://www.slapix.com/lol/you_are_beautiful.aspx" title="You are beautiful"><img class="zit" src="http://www.slapix.com/img/i2m/you_are_beautiful.jpg" /></a></li> </ul> </div>
Nema komentara:
Objavi komentar
Noviji post
Stariji postovi
Početna stranica
Pretplati se na:
Objavi komentare (Atom)
Nema komentara:
Objavi komentar