Membuat Image Enlarger [CSS3]

<style type="text/css">
.pyzslide { 
display: block; 
text-decoration: none; 
float: left; 
}
.pyzlast { 
border: 0px none; 
}
.pyzslide img { 
display: block; 
border: 0px none; 
width: 60px; height: 40px; 
cursor: pointer; 
transition-duration: 0.7s; 
}
.pyzslide:hover img { 
width: 480px; 
height: 320px;
}
</style>
<a class="pyzslide" aria-haspopup="true"><img class="a1" src="http://s5.postimg.org/qmwffzoav/image.jpg" alt=""></a>
<a class="pyzslide" aria-haspopup="true"><img class="a2" src="http://s5.postimg.org/t09rt9dc7/image.jpg" alt=""></a>
<a class="pyzslide" aria-haspopup="true"><img class="a3" src="http://s5.postimg.org/ev3yrg4av/image.jpg" alt=""></a>
<a class="pyzslide" aria-haspopup="true"><img class="a4" src="http://s5.postimg.org/rjy9b4afb/image.jpg" alt=""></a>
<a class="pyzslide last" aria-haspopup="true"><img class="a5" src="http://s5.postimg.org/5oq9hwog7/image.jpg" alt=""></a>

Hasilnya:




Happy Blogging!

2 comments

Aldino Akmel delete May 12, 2014 at 2:53 AM

waw, keren nih gan,.. makasih ya..

Maniez Mutz delete May 12, 2014 at 10:13 AM

sama2 :coffee

Allowed tag: <i>...</i> <b>...</b> [img]...[/img] <youtube>...</youtube> [pre]...[/pre]

Emoticons

:) :D :coffee :( :malu :sorry :takut :ultah :traveller :sup :sup2 :toast :confused :wizard :manyun :zzz :cool :lol :cat :mad :bandit :smoking