วิธีออกแบบภาพซ้อนทับแบบกำหนดเองใน Divi

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

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

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงภาพซ้อนทับ Divi ฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างภาพซ้อนทับแบบกำหนดเองใน Divi

การสร้างส่วน แถว และคอลัมน์

ในการเริ่มต้น ให้สร้างแถวสามคอลัมน์ภายในส่วนเริ่มต้น

เปิดการตั้งค่าส่วนและเพิ่มสีพื้นหลังต่อไปนี้:

• สีพื้นหลัง: #3a0ca3

ถัดไป เปิดการตั้งค่าสำหรับคอลัมน์ 1 และอัปเดตสิ่งต่อไปนี้:

• CSS Class: et-overlay-container
• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

จำเป็นต้องใช้คลาส CSS เพื่อทริกเกอร์เอฟเฟกต์โฮเวอร์ของไอเท็มโอเวอร์เลย์ที่เราจะสร้าง จำเป็นต้องมีโอเวอร์โฟลว์ที่ซ่อนอยู่เนื่องจากเราจะมีเอฟเฟกต์โฮเวอร์ที่ปรับขนาดรูปภาพเกินคอนเทนเนอร์ของคอลัมน์

การเพิ่มรูปภาพ

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

อัปโหลดรูปภาพที่เป็นแนวตั้งมากกว่าแนวนอน ฉันใช้อันที่มีขนาดประมาณ 800px x 1050px ตรวจสอบให้แน่ใจว่ากว้างพอที่จะขยายเต็มความกว้างของคอลัมน์ในทุกขนาดเบราว์เซอร์

(หมายเหตุ: คุณสามารถใช้ภาพแนวนอนได้ แต่คุณอาจต้องปรับตำแหน่งขององค์ประกอบการซ้อนทับให้สอดคล้องกันเพื่อไม่ให้ซ้อนทับกัน)

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ระยะขอบ: 0px ด้านล่าง

ภายใต้แท็บขั้นสูง เพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: et-overlay-image

การเพิ่มสีภาพซ้อนทับโดยใช้โมดูลตัวแบ่ง

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

ขั้นแรก เพิ่มโมดูลตัวแบ่งใต้รูปภาพ

จากนั้นจัดตำแหน่งตัวแบ่งแบบสัมบูรณ์เพื่อให้อยู่ด้านบนของภาพ:

• ตำแหน่ง: Absolute

ใต้แท็บเนื้อหา ให้อัปเดตสิ่งต่อไปนี้:

• แสดงตัวแบ่ง: NO
• สีพื้นหลัง: rgba(247,37,133,0.8)

จากนั้นอัปเดตความสูงและความกว้างของตัวแบ่ง:

• ความกว้าง: 100%
• ส่วนสูง: 100%

เมื่อออกแบบเสร็จแล้ว ให้เพิ่มคลาส CSS ต่อไปนี้ลงในตัวแบ่ง:

• et-overlay-item

(หมายเหตุ: ควรเพิ่มคลาสนี้ในองค์ประกอบการออกแบบโอเวอร์เลย์ทั้งหมดที่คุณต้องการให้แสดงเฉพาะเมื่อวางเมาส์เหนือ หากคุณไม่ต้องการให้องค์ประกอบถูกซ่อนในตอนแรก ให้ปล่อยไว้)

เพื่อช่วยติดตามองค์ประกอบ/โมดูลการออกแบบ ให้เปิดโมดอลของเลเยอร์ และติดป้ายกำกับโมดูลตัวแบ่ง (“สีโอเวอร์เลย์”)

การเพิ่มข้อความส่วนหัวของโอเวอร์เลย์

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

อัปเดตเนื้อหาด้วยส่วนหัว H2:

<h2>Coaching</h2>

จากนั้นอัปเดตป้ายกำกับของโมดูลข้อความเพื่ออ้างอิงในภายหลัง

ภายใต้การตั้งค่าการออกแบบข้อความ ให้อัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: เบา

• แบบอักษรของหัวเรื่อง 2: Cormorant Garamond
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 2 ขนาดข้อความ: 40px

• ความกว้าง: 100%
• ความกว้างสูงสุด: 85%

ใต้แท็บขั้นสูง ให้อัปเดตตำแหน่งดังนี้:

• ตำแหน่ง: Absolute
• ที่ตั้ง: top center
• ออฟเซ็ตแนวตั้ง: 10%

(หมายเหตุ: อาจจำเป็นต้องปรับออฟเซ็ตแนวตั้งขึ้นอยู่กับขนาดของอัตราส่วนภาพของภาพ ตัวอย่างเช่น ภาพประเภทแนวนอนอาจต้องการออฟเซ็ตน้อยกว่า)

ถัดไป เพิ่มคลาส CSS ต่อไปนี้ในโมดูลข้อความ:

• CSS Class: et-overlay-item ย้ายลง

นอกเหนือจากคลาส "et-overlay-item" เรากำลังเพิ่มคลาส "move-down" เพิ่มเติมเพื่อใช้ CSS ที่กำหนดเองเพื่อย้ายส่วนหัวลงเล็กน้อยเมื่อวางเมาส์ไว้

การสร้างข้อความเนื้อหาซ้อนทับ

ในการสร้างข้อความเนื้อหาซ้อนทับ เราสามารถทำซ้ำโมดูลข้อความที่ใช้สำหรับส่วนหัวของโอเวอร์เลย์ ก่อนที่เราจะอัปเดตการตั้งค่าสำหรับรายการที่ซ้ำกัน ให้เปลี่ยนป้ายกำกับเป็น "เนื้อหาซ้อนทับ"

เปิดการตั้งค่าข้อความสำหรับโมดูลข้อความใหม่และอัปเดตเนื้อหาเนื้อหาด้วยข้อความย่อหน้าสองสามประโยค

ภายใต้แท็บขั้นสูง เปลี่ยนตำแหน่งที่แน่นอนของโมดูลให้อยู่ตรงกลาง

เนื่องจากเราไม่ต้องการให้สิ่งนี้เลื่อนไปบนโฮเวอร์ (ปรากฏเท่านั้น) ให้อัปเดตคลาส CSS ให้รวมเฉพาะสิ่งต่อไปนี้:

• CSS คลาส: et-overlay-item

การสร้างปุ่มโอเวอร์เลย์

องค์ประกอบซ้อนทับสุดท้ายในภาพนี้จะเป็นปุ่ม ในการสร้างปุ่ม ให้เพิ่มโมดูลปุ่มใหม่ภายใต้โมดูลข้อความ "ข้อความเนื้อหา"

ก่อนเปลี่ยนดีไซน์ อัพเดทตำแหน่งของปุ่มดังนี้

• ตำแหน่ง: สัมบูรณ์
• ออฟเซ็ตแนวตั้ง: 10%

ตอนนี้ปุ่มควรอยู่กึ่งกลางที่ส่วนล่างของภาพ

ขณะอยู่ในแท็บขั้นสูง ให้อัปเดตคลาส CSS และเพิ่มตัวอย่าง CSS ที่กำหนดเองไปยังองค์ประกอบหลักดังนี้:

• CSS Class: et-overlay-item move-up
• องค์ประกอบหลัก CSS:

  min-width: 15em

สังเกตว่ามีการเพิ่มคลาสเพิ่มเติมให้กับปุ่มเพื่อเลื่อนขึ้นด้านบนเล็กน้อยเมื่อวางเมาส์ไว้ นี่คือการชมข้อความหัวเรื่องเลื่อนลงเมื่อวางเมาส์เหนือ

จากนั้นอัปเดตการตั้งค่าการออกแบบต่อไปนี้:

• การจัดตำแหน่งปุ่ม: กึ่งกลาง
• ขนาดข้อความของปุ่ม: 14px
• ปุ่ม สีพื้นหลัง: #4361ee
• ปุ่มความกว้างของเส้นขอบ: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 0.1em
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: TT
• ช่องว่างภายใน: 0.8em บน, 0.8em ล่าง, 0px ซ้าย, 0px right

การเพิ่ม Custom CSS ด้วย Code Module

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

จากนั้นวาง CSS ต่อไปนี้ในเนื้อหาโค้ด อย่าลืมใส่โค้ดลงในแท็กสคริปต์ที่จำเป็น

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

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

ทำซ้ำคอลัมน์สำหรับการออกแบบเพิ่มเติม

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

การสร้างการออกแบบภาพซ้อนทับ #2

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

ปรับตำแหน่งข้อความเนื้อหาและคลาส CSS

เปิดการตั้งค่าสำหรับโมดูลข้อความเนื้อหาซ้อนทับในคอลัมน์ 2 และอัปเดตตำแหน่ง:

• ที่ตั้ง: Bottom Center
• ออฟเซ็ตแนวตั้ง: 5%

จากนั้นอัปเดตคลาส CSS ด้วยสิ่งต่อไปนี้:

• CSS Class: et-overlay-item move-up

ปรับตำแหน่งปุ่มและคลาส CSS

ถัดไป เปิดการตั้งค่าสำหรับปุ่มในคอลัมน์ 2 และอัปเดตตำแหน่งตำแหน่งต่อไปนี้:

• ที่ตั้ง: เซ็นเตอร์ เซ็นเตอร์

จากนั้นนำ CSS Class ออกเพราะเราต้องการให้ปุ่มมองเห็นได้เสมอ

เปิดการตั้งค่าสำหรับโมดูลตัวแบ่ง (สีซ้อนทับ) และเปลี่ยนพื้นหลังดังนี้:

• สีพื้นหลัง: rgba(67,97,238,0.8)

จากนั้นเปิดการตั้งค่าสำหรับปุ่มและเปลี่ยนสีพื้นหลัง:

• สีพื้นหลังของปุ่ม: #f72585

ปรับรูปภาพและคลาส CSS

ถัดไป เปิดการตั้งค่าสำหรับรูปภาพและอัปโหลดรูปภาพใหม่ (หากต้องการ)

จากนั้นเพิ่มคลาส CSS ต่อไปนี้ให้กับรูปภาพ:

• CSS Class: et-overlay-image et-scale

สังเกตว่านอกจากคลาส "et-overlay-image" แล้ว ยังมีคลาสเพิ่มเติมที่เรียกว่า "et-scale" ซึ่งจะทำให้ภาพขยายขนาดขึ้น ทำให้เกิดเอฟเฟกต์ซูมเข้าเมื่อวางเมาส์เหนือ

การสร้างการออกแบบภาพซ้อนทับ #3

ถึงเวลาสร้างการออกแบบภาพซ้อนทับที่สามในคอลัมน์ 3

ปรับเนื้อหาข้อความซ้อนทับและคลาส CSS

เริ่มต้นด้วยการเปิดการตั้งค่าสำหรับโมดูลข้อความเนื้อหาซ้อนทับในคอลัมน์ 3 และเพิ่มส่วนหัว H2 เหนือข้อความย่อหน้า ตอนนี้ทั้งสองจะอยู่ในโมดูลเดียวแทนที่จะเป็นสองโมดูล

จากนั้นนำคลาส CSS ออกเพื่อให้ข้อความยังคงปรากฏอยู่ด้านบนของรูปภาพ

ปรับออฟเซ็ตปุ่มและคลาส CSS

เปิดการตั้งค่าสำหรับโมดูลปุ่มและอัปเดตตำแหน่งออฟเซ็ตแนวตั้ง:

• ออฟเซ็ตแนวตั้ง: 5%

ลบหัวเรื่องโอเวอร์เลย์

ถัดไป ลบโมดูลข้อความส่วนหัวของโอเวอร์เลย์

ปรับสีโอเวอร์เลย์และคลาส CSS

เปิดการตั้งค่าสำหรับโมดูลตัวแบ่ง (สีซ้อนทับ) และอัปเดตพื้นหลังดังต่อไปนี้:

• พื้นหลังไล่ระดับสีซ้าย: rgba(67,97,238,0.8)
• พื้นหลังไล่ระดับสีขวา: rgba(247,37,133,0.8)
• ตำแหน่งเริ่มต้น: 25%
• ตำแหน่งสุดท้าย: 75%

และเนื่องจากเราต้องการให้มองเห็นการซ้อนทับแบบไล่ระดับสีอยู่ตลอดเวลา ให้นำคลาส CSS ออก

ปรับรูปภาพ CSS Class

สุดท้ายนี้ เราจะเพิ่มคลาส CSS เพิ่มเติม (“et-rotate”) ให้กับรูปภาพหลักที่จะปรับขนาดและหมุนรูปภาพเมื่อวางเมาส์ไว้

• CSS Class: et-overlay-image et-rotate

สัมผัสสุดท้าย

ก่อนที่เราจะตรวจสอบผลลัพธ์สุดท้าย เราจำเป็นต้องทำการปรับเปลี่ยนเล็กน้อย

นำขอบล่างเริ่มต้นสำหรับโมดูลทั้งหมดออก

ตามค่าเริ่มต้น แต่ละโมดูลจะมีระยะขอบด้านล่าง 30px เนื่องจากความกว้างของรางน้ำเริ่มต้น (3) ในการตั้งค่าแถว ซึ่งอาจทำให้การวางตำแหน่งของโมดูลในการออกแบบโอเวอร์เลย์ของเราลดลง หากต้องการนำออก ให้เปิดการตั้งค่าโมดูลรูปภาพสำหรับรูปภาพใดรูปหนึ่งในการออกแบบ เนื่องจากเราได้อัปเดตระยะขอบด้วยระยะขอบล่าง 0px แล้ว เราจึงสามารถขยายระยะขอบนี้ไปยังทุกโมดูลได้

คลิกขวาที่การตั้งค่าระยะขอบและเลือก "ขยายระยะขอบ"

จากนั้นเลือกขยายระยะขอบไปยังโมดูลทั้งหมดบนหน้า

ลบโมดูลโค้ดที่ซ้ำกัน

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

ผลลัพธ์สุดท้าย

เมื่อการออกแบบทั้งสามของเราเสร็จสมบูรณ์แล้ว มาดูผลลัพธ์สุดท้ายของการออกแบบภาพซ้อนทับของเรากัน

และนี่คือการออกแบบบนมือถือ เอฟเฟกต์การวางซ้อนจะใช้กับเดสก์ท็อปผ่านคิวรีสื่อ CSS ที่กำหนดเองในโมดูลโค้ดเท่านั้น ดังนั้นภาพซ้อนทับจะปรากฏบนมือถือเสมอ

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!