[jQuery]:Animated Zoom With Caption Effect

เพิ่มลูกเล่น เก๋ๆให้กับรูปภาพของเราด้วย  Animated Zoom  โดยใช้ โค้ด CSS ไม่ต้องพึ่ง Javascripts อีกต่อไป

โดยเจ้า Animated Zoom ตัวนี้   เมื่อเลื่อนเมาส์ ไปยังรูป   รูปจะ Zoom ขยายนิดนึง พร้อมจางลง
และจะมี title วิ่งเข้า อย่างน่าตื่นตาตื่นใจ สะเจ๋งมากแค่ไหนไปดูกันเลยครับ

ขั้นตอนการติดตั้ง

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ

ให้คุณค้นหาโค้ด ]]></b:skin> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]></b:skin>

 

.titlezoom{display:inline-block;overflow:hidden;position:relative;text-decoration:none} .titlezoom:before{display:block;background-color:#000;content:"";height:100%;opacity:0;position:absolute;width:100%;z-index:2} .titlezoom:after{display:block;background-color:rgba(255,255,255,0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:3;padding:2% 3%} .titlezoom img{border:none;display:block;z-index:1} .titlezoom:before,.titlezoom:after,.titlezoom img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease} .titlezoom:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)} .titlezoom:hover:before{opacity:0.3} .titlezoom:hover:after{left:0}

ขั้นที่ 2 ติดตั้ง HTML รูปภาพที่ต้องการแสดง

• แก้ไข ไตเติ้ล ข้อความทที่จะแสดง
• แก้ไข ลิงค์ url ของ href
• แก้ไข ลิงค์รูป urlรูป ของ src

นำโค้ดที่แก้ไขแล้ว ไปวางใน post บทความ หรือ Widget HTML ที่จะแสดงได้ตามควา่มต้องการ

<a class="titlezoom"  title="ไตเติ้ล" href="url"><img  src="urlรูป" height="192" width="320"></a>

ตัวอย่าง