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

หน้าแรก ฟอรั่ม ถามปัญหาการทำเว็บด้วยเวิร์ดเพรส ตัวอย่าง CSS แสดงเอฟเฟคเมื่อเมาส์ hover

ติดป้ายกำกับ: ,

กำลังดู 10 ความเห็น
  • ผู้เขียน
    ข้อความ
    • #24595
      Facebook Profile photoMenn
      Keymaster

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

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

      See the Pen Icon Hover Effects by SeedThemes ( @SeedThemes) on CodePen.

      อธิบายโค้ด

      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 เท่าด้วย จะได้ดูวื้บๆ ออกมา
    • #24602
      champachampa
      Participant

      ตังย่างถ้ามันเป็นรูปภาบแบบนี้จะใส่ยังไง

      http://u443.todsorb.com/

      • #24622
        Facebook Profile photoMenn
        Keymaster

        ตอนนี้เห็นเกือบได้แล้ว แต่

        1. ถ้าใช้ FontAwesome แล้วก๊อบโค้ดไปใช้ ก็จะไม่เจอปัญหานะครับ
        2. ถ้าจะใช้ “รูป” จะเจอปัญหาว่า รูปมันสลับสีจากขาว เป็น เขียว ไม่ได้นะครับ
        3. เว็บปัจจุบันในรูป ใส่คลาสไม่ครบครับ ใช้ <img> อย่างเดียวไม่ได้นะครับ ให้สร้างคลาสใหม่มาครอบอีกทีครับ (ในตัวอย่างคือ <a> มาครอบ <i>)
        4. หรือใช้วิดเจ็ต “ข้อความ/text” แล้วก๊อบโค้ดไปใช้ เปลี่ยน <i> เป็น <img> ดูครับ

    • #24634
      Facebook Profile photoLuebaesa
      Participant

      demo เวอร์ชั่นต่อไป อยากให้เอาเรื่องฟิวเจอร์เล็กๆน้อยพวกนี้ไปใส่ด้วยครับเช่น  Icon hover effects, Card ให้ตัวหัวข้อ ลอยอยู่เหนือรูป , Scroll to top เป็นต้นครับ! …Thks…

      • #24664
        Facebook Profile photoMenn
        Keymaster

        ถ้าเป็น CSS Class ที่ไม่ได้ใช้กันเยอะ อาจจะไม่ได้ใส่นะครับ

        แต่ Content แบบ Text Over Image อันนี้ใส่ไปละครับ ให้ชื่อว่า Content Caption นะครับ 🙂

    • #24639
      champachampa
      Participant

      อยุ่คนละที่เลย อิอิอิอิอิอิอิอิ ปรับยังไง ครับ

      http://u443.todsorb.com/

      • #24661
        Facebook Profile photoMenn
        Keymaster

        ในโค้ดที่ให้ไป จะมี HTML กับ CSS นะครับ

        ลองก๊อบ HTML ทั้งชุด ไปใส่ในวิดเจ็ตให้ดูหน่อยครับ กับก๊อบ CSS ไปใส่ใน SiteOrigin CSS ครับ

        แล้วเดี๋ยวผมมาช่วยดูต่อให้ครับ

    • #24641
      champachampa
      Participant

      wp

      1234

    • #24700
      champachampa
      Participant

      ที่นี้ก๊อบ HTML ทั้งชุด ไปใส่ในวิดเจ็ต มันขื้นแบบนี้

    • #24702
      Facebook Profile photoMenn
      Keymaster

      ผมเข้าไป copy กับ paste โค้ดตามที่เขียนอธิบายด้านบนให้แล้วนะครับ ไม่เจอปัญหาอย่างที่บอกนะครับ ลองเช็คดูครับ

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

    • #24712
      champachampa
      Participant

      ครับ ผม ขอบใจ ครับ สมมุดเราอยากเพีมขะหนาดให้ใหย่ขื้น ปรับตรงไหน ครับ ภ้าไปปรับ ตรง fa-4x มันเพียนไป

      • #24720
        Facebook Profile photoMenn
        Keymaster

        อยากให้ฟอนต์ขนาดใหญ่ขึ้น คำสั่ง CSS คือ font-size ครับ

        ลองไล่ๆ ปรับดูจากโค้ดที่ผมให้ไปครับ มันมีไม่กี่บรรทัด ค่อยๆ เปลี่ยนแปลงค่าไปทีละนิด จะได้เข้าใจ CSS มากขึ้นด้วยครับ

    • #50145
      missing
      Participant

      ขอถามหน่อยครับ  Icon Hover Effects รูปIcom อยากจะหาเพื่มเติม หรือเอา icom ที่มีไฟส มันทำได้ไหมครับ หรือ ว่า มันมีแค่นั้นครับ

       

      • #50223
        Facebook Profile photoMenn
        Keymaster

        ถ้าอยากได้ icon เยอะๆ ลองใช้ Font Awesome ก็ได้ครับ

        ถ้าใช้ธีม Seed ดูหน้า รูปแบบเว็บ -> ตั้งค่าธีม ล่างสุดจะมีให้ Enable (เปิดใช้) Font Awesome ได้นะครับ

        ถ้าใช้ธีมอื่น ลองลงปลั๊กอินอย่างเช่น Font Awesome 4 Menu ก็ได้ครับ

    • #50469
      missing
      Participant

      menn แล้ว <link rel=”shortcut icon” href=”../favicon.ico”>  มันคือการเชื่อมต่อของ ปลั๊กอิน ใช้ไหมครับ

      แล้ว icom ที่เราออกแบบเอง สามารถใสลงไปได้ไหมครับ

      เพราะ บ้างครั้ง icom มีรูปเฉพราะ งานของมันนะครับ เช่น ผมจะเอารูปนี้เป็น  Address-Book-icon-1 มาเป็น Icom มันต้องทำอย่างไรครับ

       

    • #223102
      Facebook Profile photoamnad
      Participant

      ขอบคุณ CSS สวยๆ จาก อ.พี่แม่น ครับผม…

กำลังดู 10 ความเห็น

  • คุณต้องเข้าสู่ระบบเพื่อตอบกลับกระทู้นี้