Mademoiselle' { id Dream }

ลำดับตอนที่ #25 : { id dream CODE } มาด'มัวแซล : รูปมีลิงค์แถมใส่กรอบพอชี้แล้วเจิ่ดอ่ะ!

 

 GET CODE

 

<style name="shoofly-pie" type="text/css">

.ji-tumblr-photos img, #broll img {width: 50px;padding: 3px;border:1px solid #eee;margin: 1px;filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}

.ji-tumblr-photos img:hover, #broll img:hover {filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%);background:#000;transition: all 2s ease;}</style>

<div id="broll">

<center>

<a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a> <a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a> <a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a> <a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a> <a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a><br />

<a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a> <a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a> <a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a> <a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a> <a href="/"><img src="http://i.imgur.com/xiMtS6y.png" /></a></center>

</div>

อธิบายก่อนจากนิดนึง : -ตรงที่ไฮไลท์น้ำเงินเอาไว้ให้คือเปลี่ยนรูปนะจ๊ะ :)
-เลขที่ทำสีแดงเอาไว้คือเปลี่ยนขนาดนะ อยากได้ขนาดอะไรปรับตามใจได้เลย
แนะนำน้า รูปที่เอามาใส่ควรเป็นรูปที่ขนาดกว้างและยาวเท่ากันนะ เช่น 100x100 200x200 เป็นต้น
-ใส่ลิงค์ได้ด้วยน้า! เก๋ไปเลย!

ใครชอบหยิบยืมเอาไปใช้ได้เลย อย่าลืมให้เครดิตนะคะ
credit: M'selle code