5 CSS Libraries สำหรับทำ Hover Image ให้สวยงาม สุดชิค

10
มิ.ย.
    2020-06-10 10:48:11   
    437
      siamweb2u

นอกจากตกแต่งรูปบนเว็บของคุณให้ดูสวยงาม ในบางครั้งอาจจะต้องมีคำอธิบายรูปภาพ ซึ่ง Hover Image ถือว่าเป็นเทคนิคที่ช่วยทำให้คำอธิบาย หรือชื่อรูปภาพนั้น มีความสวยงาม น่าสนใจขึ้นมาก ซึ่งการทำ Hover Image แต่ละครั้งจะมีลูกเล่นแตกต่างกันออกไป ขึ้นอยู่กับว่าเราต้องการลูกเล่นแบบไหน ซึ่งการที่จะใส่ลูกเล่นให้กับรูปภาพ ไม่ใช่เรื่องง่ายเลย เพราะบางครั้งเราอาจจะคิด concept ไม่ออกด้วยซ้ำ หรือว่าคิดออกแล้ว จะทำยังไงต่อ วันนี้จึงมานำเสนอตัวอย่าง Hover Image เก๋ๆ ที่มีหลายรูปแบบให้คุณสามารถเลืกใช้ได้เลย ดังนี้

1. iHover

 

     iHover เป็นแหล่งรวม Hover effect ที่ใช้ CSS3 สำหรับรูปภาพ โดยมี 20 effect สำหรับรูปภาพในรูปแบบวงกลม และ 15 effect สำหรับรูปภาพสี่เหลี่ยม หากสนใจสามารถเข้าไปที่ iHover


 

2. Image Hover Effects

 

     เป็นอีกหนึ่งแหล่งที่มี CSS เจ๋งๆ ถึง 16 effect พร้อมกับแคปชั่นเก๋ๆ หากสนใจสามารถเข้าไปที่ Image Hover Effects


 

3. imagehover.css

 

     อีกหนึ่งแหล่งที่รวบรวม Pure CSS สำหรับ Hover เจ๋งๆ เช่น Fade Slide เป็นต้น สามารถใช้ฟรีได้ถึง 44 effect หากสนใจสามารถเข้าไปที่ imagehover.css


 

4. Hover Effect Ideas

 

     Library นี้คือสุดยอดแห่งแรงบันดาลใจ เพราะมี effect ที่จัดได้ว่าสวยงามอยู่มากมาย โดยจะเป็นตัว Demo ไว้เป็นไอเดียให้กับเรา หากสนใจสามารถเข้าไปที่ Hover Effect Ideas


 

5. Caption Hover Effect

 

     หากมองหาไอเดีย Hover ในรูปแบบ Transition ต้องห้ามพลาด เพราะที่นี่รวม effect สวยๆ และลื่นไหล ไว้มากมาย หากสนใจสามารถเข้าไปที่ Caption Hover Effect

บทความล่าสุด

12
ส.ค.
แก้ปัญหา PHP substr ตัดข้อความภาษาไทยแล้วกลายเป็นภาษาต่างดาว
<?=substr("ทดสอบ ทดสอบ ทดสอบ ทดสอบ ทดสอบ",0,50)."...";?>     คิดว่าหลาย ๆ คนคงอ..
                                                                                                                                                                  
12
ส.ค.
การใช้ substr(ข้อความที่ต้องการตัด , เริ่ม ,จบ) จากตัวอย่าง เป็นการประกาศตัวแปร $txt รับค่า ตัวแปร
การใช้ substr(ข้อความที่ต้องการตัด , เริ่ม ,จบ) จากตัวอย่าง เป็นการประกาศตัวแปร $txt รับค่..
                                                                                                                                                                  
29
ก.ค.
แจก Code ข่าวหนังสือราชการ สถ. ติดเว็บไซต์ อบต. กรมส่งเสริมการปกครองท้องถิ่น
แจก Code ข่าวหนังสือราชการ สถ. ติดเว็บไซต์ อบต. กรมส่งเสริมการปกครองท้องถิ่น   <iframe sr..
                                                                                                                                                                  
10
มิ.ย.
ระบบติดต่อเรา แบบ Contact Popup | Feature SoGoodWeb
Contact Popup คืออะไร ปุ่มแสดงข้อมูลการติดต่อที่รวมทุกช่องทางการติดต่อไว้ในที่เดียว บ..
                                                                                                                                                                  
10
มิ.ย.
ทำไมเว็บไซต์ต้องมี HTTPS ?
เว็บไซต์ที่มีรูปกุญแจล็อกปรากฎอยู่ด้านหน้าเว็บไซต์และขึ้นต้นด้วย “HTTPS” เป็นสัญลักษณ์ (สี..