ตัวอย่าง CSS แสดงเอฟเฟคเมื่อเมาส์ hover

ขอบคุณข้อมูลจาก SeedThemes โดย พี่เม่น ได้รับอนุญาตให้เผยแพร่ได้


มีคนถามมาหลังไมค์ว่า ถ้าอยากได้เอฟเฟคประมาณนี้ Icon Hover Effects ต้องแก้โค้ดอย่างไร

ผมเลยเขียนตัวอย่างมาให้ดูนะครับ

อธิบายโค้ด

  1. คลาส hover-fx เอาไว้ใส่พื้นหลังสีขาวจางๆ ให้ ส่วนด้านในก็ใส่ไอคอนไปตามปกติ (ถ้าต้องการใช้ FontAwesome ลองลงปลั๊กอิน Font Awesome 4 Menus ดูครับ)
  2. ส่วนเอฟเฟค กรอบสีขาวล้อมรอบ เราใช้วิธีใส่ hover-fx:after ซะ (แอบแทรกเนื้อหาต่อจาก hover-fx) โดยสั่งให้เนื้อหาเป็นว่างเปล่า แต่ใส่ขอบ box-shadow ขาวเข้มไว้ สั่งให้ opacity เป็น 0 ไว้ก่อน จะได้มองไม่เห็น
  3. ทีนี้ เวลาเอาเมาส์ hover ก็สั่งให้ hover-fx พื้นหลังขาวเต็มที่ ส่วนไอคอนก็เปลี่ยนสีไป กับ hover-fx:after สั่งให้ opacity เป็น 1 จะได้โชว์ตัวออกมา พร้อมทั้งสั่งให้ขยายตัว 1.15 เท่าด้วย จะได้ดูวื้บๆ ออกมา

โดย: [K] Narongchai Suphiratwanich

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ Mennstudio และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย

สอบถาม & พูดคุย