ขอบคุณข้อมูลจาก SeedThemes โดย พี่เม่น ได้รับอนุญาตให้เผยแพร่ได้
มีคนถามมาหลังไมค์ว่า ถ้าอยากได้เอฟเฟคประมาณนี้ Icon Hover Effects ต้องแก้โค้ดอย่างไร
ผมเลยเขียนตัวอย่างมาให้ดูนะครับ
อธิบายโค้ด
- คลาส hover-fx เอาไว้ใส่พื้นหลังสีขาวจางๆ ให้ ส่วนด้านในก็ใส่ไอคอนไปตามปกติ (ถ้าต้องการใช้ FontAwesome ลองลงปลั๊กอิน Font Awesome 4 Menus ดูครับ)
- ส่วนเอฟเฟค กรอบสีขาวล้อมรอบ เราใช้วิธีใส่ hover-fx:after ซะ (แอบแทรกเนื้อหาต่อจาก hover-fx) โดยสั่งให้เนื้อหาเป็นว่างเปล่า แต่ใส่ขอบ box-shadow ขาวเข้มไว้ สั่งให้ opacity เป็น 0 ไว้ก่อน จะได้มองไม่เห็น
- ทีนี้ เวลาเอาเมาส์ hover ก็สั่งให้ hover-fx พื้นหลังขาวเต็มที่ ส่วนไอคอนก็เปลี่ยนสีไป กับ hover-fx:after สั่งให้ opacity เป็น 1 จะได้โชว์ตัวออกมา พร้อมทั้งสั่งให้ขยายตัว 1.15 เท่าด้วย จะได้ดูวื้บๆ ออกมา
Narongchai Suphiratwanich (K)
นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย