วิธีเปลี่ยนรูปภาพบน Hover ด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน เรามาดูตัวอย่างสี่ตัวอย่างที่เราจะสร้างใหม่ตั้งแต่ต้น

ขั้นตอนทั่วไป

เพิ่มมาตราใหม่

ในส่วนแรกของบทช่วยสอนนี้ เราจะดำเนินการตามขั้นตอนทั่วไป ขั้นตอนทั่วไปเหล่านี้จะช่วยให้เราประหยัดเวลาเมื่อมุ่งเน้นไปที่สามตัวอย่างแรก เปิดหน้าใหม่หรือหน้าที่มีอยู่แล้วเพิ่มส่วนปกติเข้าไป

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

จากนั้น เพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

คอลัมน์ 1 ภาพพื้นหลัง

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเพิ่มรูปภาพพื้นหลังในคอลัมน์แรก เลือกรูปภาพที่คุณต้องการให้ปรากฏบนโฮเวอร์

• คอลัมน์ 1 เล่นภาพพื้นหลังซ้ำ: ไม่เล่นซ้ำ

เพิ่มรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

ดำเนินการต่อโดยเพิ่มโมดูลรูปภาพในคอลัมน์แรกและอัปโหลดรูปภาพที่คุณต้องการให้ปรากฏก่อนวางเมาส์เหนือ

เพิ่มโมดูลข้อความชื่อเรื่องลงในคอลัมน์ 2

เพิ่มเนื้อหา

ในคอลัมน์ที่สอง เราต้องการโมดูลข้อความชื่อก่อน ไปข้างหน้าและเพิ่มเนื้อหา H3

การตั้งค่าข้อความหัวเรื่อง

จากนั้นไปที่การตั้งค่าข้อความส่วนหัวและทำการเปลี่ยนแปลงบางอย่าง

• แบบอักษรของหัวเรื่อง 3: Baloo Tamma
• หัวเรื่อง 3 สีข้อความ: #eda96a
• หัวเรื่อง 3 ขนาดข้อความ: 100px (เดสก์ท็อป), 70px (แท็บเล็ต), 50px (โทรศัพท์)
• หัวเรื่อง 3 ระยะห่างตัวอักษร: -4px

• หัวเรื่อง 3 ข้อความเงา ความยาวแนวนอน: 0.04em
• หัวเรื่อง 3 ข้อความเงา ความยาวแนวตั้ง: 0.04em
• หัวเรื่อง 3 สีเงาข้อความ: rgba(0,0,0,0.6)

ระยะห่าง

สุดท้าย เพิ่มระยะขอบบนในการตั้งค่าการเว้นวรรค

• ขอบบน: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 2

แสดงตัวแบ่ง

เพิ่มโมดูลตัวแบ่งด้านล่างโมดูลข้อความชื่อในคอลัมน์ 2

• แสดงตัวแบ่ง: ใช่

ตัวแบ่งสี

เปลี่ยนสีตัวแบ่งถัดไป

• ตัวแบ่งสี: #e25300

สไตล์

และเลือกรูปแบบตัวแบ่งอื่นในการตั้งค่ารูปแบบ

• รูปแบบตัวแบ่ง: จุด

ขนาด

เพิ่มน้ำหนักตัวแบ่งในการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 3px

เพิ่มโมดูลข้อความเนื้อหาในคอลัมน์ 2

เพิ่มเนื้อหา

สู่โมดูลสุดท้าย! เพิ่มโมดูลข้อความเนื้อหาในคอลัมน์ที่สองด้วยเนื้อหาที่เลือก

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความถัดไป

• ขนาดตัวอักษร: 16px
• ความสูงของบรรทัดข้อความ: 2.3em
• การวางแนวข้อความ: Justify

โคลนมาตราสองครั้ง

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

สร้างตัวอย่าง #1

ใช้การตั้งค่าเพิ่มเติมกับโมดูลรูปภาพ

ความทึบเริ่มต้น

มาเริ่มสร้างตัวอย่างแรกกันเลย! สิ่งเดียวที่เราจะทำที่นี่คือการสร้างการเปลี่ยนแบบโฮเวอร์ โดยไม่มีเอฟเฟกต์เพิ่มเติมใดๆ ในการทำเช่นนั้น ให้เปิด Image Module และไปที่การตั้งค่าตัวกรอง ตรวจสอบให้แน่ใจว่าค่าความทึบเริ่มต้นคือ 100%

• ความทึบ: 100%

โฮเวอร์ความทึบ

เปลี่ยนความทึบเมื่อโฮเวอร์

• ความทึบ: 0%

การเปลี่ยนผ่าน

สุดท้าย สร้างการเปลี่ยนแปลงที่ราบรื่นโดยการเพิ่มระยะเวลาการเปลี่ยนแปลง

• ระยะเวลาการเปลี่ยนภาพ: 1200ms

สร้างตัวอย่าง #2

ใช้การตั้งค่าเพิ่มเติมกับโมดูลรูปภาพ

ระยะห่างเริ่มต้น

สู่ตัวอย่างที่สอง! เปิด Image Module ในคอลัมน์ 1 และตรวจสอบให้แน่ใจว่าไม่มีช่องว่างภายในแบบกำหนดเองเริ่มต้นอยู่ที่นั่น

โฮเวอร์ระยะห่าง

ดำเนินการต่อโดยเพิ่มช่องว่างภายในด้านล่างบนโฮเวอร์เพื่อให้รูปภาพบนโฮเวอร์มีขนาดเพิ่มขึ้น

• ช่องว่างภายในด้านล่าง: 100px

กล่องเงา

นอกจากนี้เรายังเพิ่มเงากล่องเริ่มต้นซึ่งจะหายไปเมื่อวางเมาส์ไว้

• ตำแหน่งแนวนอนของกล่องเงา: -55px
• ตำแหน่งแนวตั้งเงาของกล่อง: -50px
• ความแรงของการกระจายเงาของกล่อง: -10px
• Shadow Color: #eda96a

ความทึบเริ่มต้น

ถัดไป ไปที่การตั้งค่าตัวกรอง และตรวจสอบให้แน่ใจว่าค่าความทึบเริ่มต้นคือ 100%

• ความทึบ: 100%

โฮเวอร์ความทึบ

ลบความทึบของโมดูลเมื่อโฮเวอร์ ซึ่งจะทำให้พื้นหลังของคอลัมน์ปรากฏขึ้นและสร้างเอฟเฟกต์ 'รูปภาพเมื่อวางเมาส์เหนือ'

• ความทึบ: 0%

การเปลี่ยนผ่าน

สุดท้าย เพิ่มระยะเวลาการเปลี่ยนภาพในการตั้งค่าการเปลี่ยนภาพของโมดูลภาพ

• ระยะเวลาการเปลี่ยนภาพ: 1200ms

สร้างตัวอย่าง #3

เพิ่มพื้นหลังไล่ระดับให้กับคอลัมน์ 1

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

• สี 1: rgba(43,135,218,0)
• สี 2: #ffffff
• คอลัมน์ 1 ประเภทการไล่ระดับสี: เรเดียล
• คอลัมน์ 1 ทิศทางเรเดียล: กึ่งกลาง
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 60%
• คอลัมน์ 1 ตำแหน่งสิ้นสุด: 60%

ใช้การตั้งค่าเพิ่มเติมกับโมดูลรูปภาพ

ความทึบเริ่มต้น

ดำเนินการต่อโดยเปิดโมดูลรูปภาพในคอลัมน์ 1 และตรวจสอบให้แน่ใจว่าค่าความทึบเริ่มต้นคือ 100%

• ความทึบ: 100%

โฮเวอร์ความทึบ

ลบความทึบทั้งหมดบนโฮเวอร์เพื่อให้พื้นหลังของคอลัมน์สามารถแสดงผ่านได้

• ความทึบ: 0%

สร้างตัวอย่าง #4

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

สู่ตัวอย่างสุดท้าย! ที่นี่เราต้องการแถวใหม่ที่มี 6 คอลัมน์

คอลัมน์ 1 ภาพพื้นหลัง

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเพิ่มภาพพื้นหลังที่คุณต้องการให้ปรากฏบนโฮเวอร์เป็นภาพพื้นหลังของคอลัมน์ 1

• คอลัมน์ 1 เล่นภาพพื้นหลังซ้ำ: ไม่เล่นซ้ำ

ทำซ้ำสำหรับคอลัมน์ทั้งหมดใน Row

ทำซ้ำขั้นตอนก่อนหน้าสำหรับแต่ละคอลัมน์ในแถวของคุณ

ขนาด

จากนั้นไปที่การตั้งค่าขนาดของแถวและลบช่องว่างระหว่างคอลัมน์ทั้งหมด

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: 1

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

ดำเนินการต่อโดยเพิ่มโมดูลรูปภาพในคอลัมน์แรกและอัปโหลดรูปภาพที่คุณต้องการให้ปรากฏเป็นค่าเริ่มต้น

ความทึบเริ่มต้น

ตรวจสอบให้แน่ใจว่าความทึบเริ่มต้นของโมดูลนี้เป็น 100%

• ความทึบ: 100%

โฮเวอร์ความทึบ

และลบความทึบบนโฮเวอร์เพื่อให้พื้นหลังของคอลัมน์แสดงแทน

• ความทึบ: 0%

การเปลี่ยนผ่าน

เพิ่มระยะเวลาการเปลี่ยนภาพเพื่อการเปลี่ยนแปลงที่ราบรื่น

• ระยะเวลาการเปลี่ยนภาพ: 800ms

Clone Image Module 3 ครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

เมื่อคุณแก้ไข Image Module ในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนและใส่สำเนาในคอลัมน์ที่เหลือได้ อย่าลืมเปลี่ยนภาพด้วย

ดูตัวอย่าง

ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้ว และทั้งสี่ตัวอย่าง มาดูตัวอย่างสุดท้ายทั้งสามตัวอย่างที่เราสร้างขึ้น

ความคิดสุดท้าย

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

ภาพเด่นโดย LovArt / shutterstock.com