Home » , , » โค้ดแสดงลูกเล่นให้ภาพ img hover

โค้ดแสดงลูกเล่นให้ภาพ img hover

โค้ด img:hover สำหรับแสดงลูกเล่นให้ภาพตัวอย่างบทความ ในหน้าแรกของเว็บ เมื่อเอาเมาส์ชี้ที่ภาพ ภาพก็จะขยับซูมเข้ามา ให้สวยงามน่าสนใจ เพิ่มชีวิตชีวา ให้กับเว็บหรือบล็อกได้ครับ
มี2แบบ โค้ดแสดงในภาพตัวอย่างในหน้าแรก และ โค้ดแสดงในภาพตัวอย่างใน Popular Posts
คัดลอกโค้ดไปใช้ได้เลยครับ
ขั้นตอน
ไปที่ >> แม่แบบ >>แก้ไขHTML>> ค้นหา.post img:hover >>วางโค้ดสีแดงแทนที่โค้ดเดิม>>บันทึกเทมเพลต

แสดงในภาพตัวอย่างในหน้าแรก
วิธีทำ
1.ค้นหา .post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
(วิธีค้นหา กด CTRL + F แล้ววาง .post img:hover กดEnter)

2.วางโค้ดสีแดงลงไปแทนที่
โค้ด
.post img:hover{filter:alpha(opacity=100);opacity:1;-moz-transform: scale(1.3);-webkit-transform: scale(1.3);-o-transform: scale(1.3);-ms-transform: scale(1.2);transform: scale(1.3);}

3.บันทึก เสร็จแล้วครับ
เมื่อเอาเมาส์ชี้ที่ภาพ ภาพก็จะขยับซูมเข้ามา

แสดงในภาพตัวอย่างใน Popular Posts
วิธีทำ
1.ค้นหาโค้ด
.PopularPosts .item-thumbnail img{width:72px;height:72px;padding:4px;margin:0;border:1px solid #ddd}
(วิธีค้นหา กด CTRL + F  แล้ววาง .PopularPosts กดEnter )
2.วางโค้ดสีแดงลงไปแทนที่
โค้ด
.popular-posts ul{padding-left:15px;}
.popular-posts ul li {padding-right:10px;float:left;width:33%;list-style-type:none;border:none;line-height:0px}
.popular-posts ul li img {width:75px;opacity:1;filter:alpha(opacity=70);height:70px;background:#111;border:1px solid #222;padding:3px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
.popular-posts ul li img:hover {filter:alpha(opacity=100);opacity:1;-moz-transform: scale(1.3);-webkit-transform: scale(1.3);-o-transform: scale(1.3);-ms-transform: scale(1.2);transform: scale(1.3);}
*เพิ่มเติม
สำหรับ PopularPosts ที่ไม่ต้องการให้มีหัวข้อบทความ(ให้แสดงภาพอย่างเดียว) ให้เพิ่มโค้ดนี้ต่อท้าย
.PopularPosts .item-title a{display:none;}

3.บันทึก เสร็จแล้วครับ

0 ความคิดเห็น:

แสดงความคิดเห็น

วันนี้