เทคนิคการทำ Effect CSS Image ชี้เมาส์แล้วภาพจาง

หมวดหมู่: เขียนโปรแกรม HTML and CSS Tip & Technicเขียนเมื่อ 2015-03-31 11:50:49

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

CSS :

.imgtransparent

{

opacity:1.0; /* ค่าความจาง */

filter:alpha(opacity=100); /* สำหรับ IE8 ขึ้นไป */

}

.imgtransparent:hover

{

opacity:0.4; /* ค่าความจาง */

filter:alpha(opacity=40); /* สำหรับ IE8 ขึ้นไป */

}

ลองไปทำดูกันนะครับ :)

ขอบคุณเนื้อหาจาก :

ไอทีจีเนียส เอ็นจิเนียริ่ง (IT Genius Engineering) ให้บริการด้านไอทีครบวงจร ทั้งงานด้านการอบรม (Training) สัมมนา รับงานเขียนโปรแกรม เว็บไซต์ แอพพลิเคชั่น งานออกแบบกราฟิก และงานด้าน E-Marketing ที่กำลังได้รับความนิยมในปัจจุบัน ทั้ง SEO , PPC , และ Social media marketting

ติดต่อเราเพื่อสอบถามผลิตภัณฑ์ ขอราคา หรือปรึกษาเรื่องไอที ได้เลยค่ะ

Line : @itgenius (มี @ ด้านหน้า) หรือ https://lin.ee/xoFlBFe
Facebook : https://www.facebook.com/itgeniusonline
Tel : 02-570-8449 มือถือ 088-807-9770 และ 092-841-7931
Email : contact@itgenius.co.th

โดย Admin ITGenius

เข้าชม 5,466 ครั้ง

คำค้นหา : การสร้างลูกเล่นให้กับเว็บไซต์CSS Image Transparent CSS การทำ Effect CSS Image ชี้เมาส์แล้วภาพจาง

บทความใหม่

หมวดหมู่