10 ไลบรารี่ CSS สำหรับเอฟเฟกต์โฮเวอร์ของรูปภาพที่ดีขึ้น

การให้ผู้ใช้ อย่างง่ายดายและชัดเจนรู้ว่าส่วนใดของเว็บเพจที่สามารถคลิกได้ เป็นส่วนสำคัญของการออกแบบ UX วิธีทำแบบเก่า แต่มีสีทองคือเปลี่ยนสีตัวอักษรและขีดเส้นใต้ ทุกวันนี้ด้วย CSS มีวิธีมากมายในการส่งเอฟเฟกต์โฮเวอร์โดยเฉพาะกับรูปภาพ.

นักพัฒนาสามารถทำได้แล้ว เพิ่มเอฟเฟ็กต์การเปลี่ยนภาพเคลื่อนไหวหรือภาพเคลื่อนไหวเมื่อมีการเรียกใช้เหตุการณ์โฮเวอร์. เรากำลังดูสไลด์ทิศทางซูมด้วยความเร็วที่แตกต่างกันเฟดอินและเฟดลึกหนาบางเอฟเฟกต์บานพับสปอตไลท์เผยส่ายส่ายและเด้ง.

ในการรวบรวมนี้มี เอฟเฟกต์โฮเวอร์มากกว่า 250 แบบ เพื่อสร้างแรงบันดาลใจให้คุณ คุณยังสามารถรับรหัสได้ที่แหล่งที่มา.

เอฟเฟ็กต์โฮเวอร์ของรูปภาพ (16 ผลกระทบ)

ในหน้านี้คุณจะได้พบกับเอฟเฟกต์ภาพโฮเวอร์ 16 แบบพร้อมคำอธิบายภาพ หยิบโค้ด HTML และ CSS สำหรับแต่ละเอฟเฟกต์โดยการวางเมาส์เหนือภาพจากนั้นคลิก แสดงรหัส.

รูปภาพคำอธิบายภาพเคลื่อนไหวโฮเวอร์ (4 ผลกระทบ)

ต่อไปนี้เป็นคำอธิบายภาพเคลื่อนไหว 4 คำที่มีเนื้อหายอดเยี่ยมที่ทำงานเมื่อมีภาพเคลื่อนไหวเหนือภาพ เอฟเฟ็กต์นั้นสร้างขึ้นด้วยการเปลี่ยนและแปลง CSS3 บริสุทธิ์และไม่มีจาวาสคริปต์เพื่อเพิ่มความสามารถในการใช้งานข้ามเบราว์เซอร์.

iHover (35 ผลกระทบ)

iHover คือชุดของเอฟเฟกต์โฮเวอร์ที่ขับเคลื่อนโดย CSS3 มีเอฟเฟ็กต์โฮเวอร์แบบวงกลม 20 แบบและเอฟเฟกต์โฮเวอร์แบบสี่เหลี่ยม 15 ตาราง ในการใช้เอฟเฟกต์คุณจะต้องเขียนมาร์กอัพ HTML และรวมไฟล์ CSS.

ภาพโฮเวอร์ (44 ผลกระทบ)

ไลบรารีนี้มีเอฟเฟกต์ 44 รายการที่สร้างขึ้นด้วย CSS บริสุทธิ์ เอฟเฟกต์บางอย่าง ได้แก่ จางหาย, ผลัก, สไลด์, บานพับ, เผยให้เห็น, ซูม, พร่ามัว, พลิก, พับและปิดในหลายทิศทาง มีเอฟเฟกต์ 216 แบบเพิ่มเติมที่สามารถซื้อได้ราคา€ 14.

ไอเดีย Effect Effect (30 ผล)

ภาพโฮเวอร์สาธิตนี้ทำโดย Codrop ให้แรงบันดาลใจเมื่อทำการเปลี่ยนระหว่างภาพและคำอธิบายภาพได้อย่างราบรื่น มีเอฟเฟ็กต์ทั้งหมด 30 รายการในสองชุดพร้อมบทเรียนและซอร์สโค้ด.

เลื่อน CSS (108 ผลกระทบ)

Hover CSS ช่วยให้คุณเพิ่มเอฟเฟกต์โฮเวอร์ลงในองค์ประกอบใด ๆ เช่นปุ่มลิงก์หรือรูปภาพ เอฟเฟ็กต์รวมถึงการเปลี่ยน 2D การเปลี่ยนพื้นหลังเส้นขอบการเปลี่ยนเงาและเรืองแสงและอื่น ๆ ไลบรารีพร้อมใช้งานใน CSS, Sass และ LESS.

animatism (เอฟเฟกต์มากกว่า 100 รายการ)

มีภาพเคลื่อนไหวที่เลื่อนไปที่ปุ่มมากกว่า 100 ภาพซ้อนทับรายละเอียดคำบรรยายภาพและปุ่มโซเชียลมีเดีย เอฟเฟ็กต์ทั้งหมดขับเคลื่อนโดย CSS3.

คำอธิบายภาพ (7 ผลกระทบ)

มีเอฟเฟ็กต์ต่าง ๆ 7 แบบในคอลเลกชันนี้ ช่วงการเปลี่ยนภาพทั้งหมดนั้นดูดีและราบรื่นจริงๆ ไปที่ส่วนบทช่วยสอนเพื่อเรียนรู้วิธีใช้เอฟเฟกต์เหล่านี้กับโครงการของคุณ.

ลักษณะพิเศษแบบโฮเวอร์ของ CSS Image (15 ผลกระทบ)

คอลเลกชันของเอฟเฟ็กต์โฮเวอร์แบบง่ายเช่นซูม, สไลด์, หมุน, ระดับสีเทา, เบลอ, ความทึบและเอฟเฟกต์พื้นฐานอื่น ๆ คุณสามารถใช้เอฟเฟกต์เหล่านี้ได้โดยเพิ่มคลาส CSS ไว้ข้างหน้าของคุณ รูป แท็ก.

เอฟเฟกต์โฮเวอร์ 3D ที่รับทราบทิศทาง

นี่เป็นเอฟเฟกต์โฮเวอร์ที่ยอดเยี่ยมซึ่งจะตรวจจับการเคลื่อนไหวของเมาส์ครั้งสุดท้ายของคุณ คำอธิบายภาพจะเปิดจากหนึ่งในสี่ทิศทางตามตำแหน่งเคอร์เซอร์สุดท้ายของคุณ.

Hover Animation

นี่คือภาพเคลื่อนไหวโฮเวอร์ชายแดนที่ได้รับแรงบันดาลใจจาก UNIQLO เมื่อมีเหตุการณ์โฮเวอร์เส้นขอบของภาพจะเป็นภาพเคลื่อนไหว.

กระเบื้องที่มีภาพเคลื่อนไหวโฮเวอร์

หนึ่งสำหรับการออกแบบกระเบื้องหนึ่งนี้มีการซูมช้า, สไลด์, ป๊อปอิน, ซ้อนทับสีจางในหมู่คนอื่น ๆ.

เอฟเฟกต์โฮเวอร์ของเส้นทางแบบคลิปของ SVG

เอ็ฟเฟ็กต์ภาพโฮสติ้งเอ็กซเรย์ภาพสุดยอดเยี่ยมที่ขับเคลื่อนโดย SVG คลิปเส้นทาง และการเปลี่ยน CSS ทำงานได้ดีบน Chrome, Opera และ Safari.