CSS เพิ่มลูกเล่นให้กับรูปภาพ

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

Moderators: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

CSS เพิ่มลูกเล่นให้กับรูปภาพ

Post by GoB » 29/01/2015 5:44 pm

CSS เพิ่มลูกเล่นให้กับรูปภาพ

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

Code: Select all

<html>
<head>
<style>
img {
    opacity: 0.4;	//ความโปร่งใสของรูปภาพ
}
img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); 	//ความโปร่งใสเมื่อนำเมาส์ไปชี้ที่รูปภาพ
}
</style>
</head>
<body>
<h1>เพิ่มลูกเล่นความโปร่งแสงให้กับรูปภาพ</h1>
<img src="rose.jpg" width="150" height="113">
</body>
</html>
ผลลัพธ์ที่ได้
-----------------------------------------------------------------------------------------

ก่อนที่จะนำเมาส์ไปชี้ที่ตำแหน่ง
ก่อน.jpg
ก่อน.jpg (16.66 KiB) Viewed 735 times
หลังจากที่นำเมาส์ไปชี้ทำตำแหน่ง
หลัง.jpg
หลัง.jpg (20.21 KiB) Viewed 735 times

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests