select2web.com

คลิกที่นี่เพื่อดู Online Demo

หลังจากที่ท่านได้ดู Demo ผมเชื่อว่าท่านจะต้องคุ้นแน่นอน การทำงานในลักษณะนี้ แต่ที่ท่านเห็นๆมา เขาจะใช้ javascript เป็นตัวสร้าง หรืออาจจะเป็น jQuery แต่สำหรับบทความครั้งนี้ ไม่ใช่เลย บทความนี้จะใช้ CSS เท่านั้น แต่จะทำงานเหมือน javascript แป๊ะๆ มาดูกันเลยครับ ว่าทำกันอย่างไร

HTML เริ่มต้นที่โครงสร้างหลักกันก่อน

<div class="imgteaser">
<a href="#">
	<img src="IMAGE_059.jpg" alt="Itame" />
	<span class="desc">
		<strong>อีติ๋มตายแน่</strong>
		ตายแน่ๆ ในโรงภาพยนต์ใกล้บ้านท่าน
	</span>
</a>
</div>

CSS โครงสร้างหลักมีเท่าที่เห็นแหละครับ ทีนี้ก็มาถึงส่วนของ CSS ส่วนที่จะทำให้ภาพแหม่งๆ จากตอนแรก ดูเป็น professional ขึ้น

กำหนดโครงสร้างเบื้องต้นก่อน แบบคร่าวๆ

.imgteaser {
	margin: 0;
	overflow: hidden;
	float: left;
	position: relative;
}
.imgteaser a {
	text-decoration: none;
	float: left;
}
/* ถ้าไม่ใส่ cursor: pointer ไป ตอนแสดงใน ie6 caption จะหน่วงนิดนึง*/
.imgteaser a:hover {
	cursor: pointer;
}

ตกแต่งภาพให้มีกรอบ มีขอบ ให้ดูคล้ายๆ ภาพโพลารอยด์ ภาพจะได้ไม่ดูทื่อๆไป

/* ตกแต่งภาพให้ดูคล้ายๆ ภาพโพลารอยด์*/
.imgteaser a img {
	float: left;
	margin: 0;
	border: none;
	padding: 10px;
	background: #fff;
	border: 1px solid #ddd;
}

มาถึงตรงที่เป็นส่วนสำคัญ ตรงที่เมื่อเอาเมาส์ชี้ ตัว caption จะปรากฎ

/* เมื่อเอาเมาส์ไปชี้ที่รูปภาพ ให้แสดงตัว caption ขึ้นมา โดยกำหนดความโปร่งแสงไว้ที่ 75%*/
/* ตรงนี้แหละที่เป็นจุดสำคัญ  CSS ตรงนี้จะทำงานก็ต่อเมื่อเอาเมาส์ไปชี้ที่ภาพเท่านั้น  โอ้วเหมือน javascript เลย*/
.imgteaser a:hover .desc{
	display: block;
	font-size: 1.2em;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #fff;
	position: absolute;
	bottom: 11px;
	left: 11px;
	padding: 10px;
	margin: 0;
	width: 566px;
	border-top: 1px solid #999;
}
 
/* ตัว strong ใน caption กำหนดให้ใหญ่กว่าปกติหน่อย เพื่อความสวยงาม*/
.imgteaser a:hover .desc strong {
	display: block;
	margin-bottom: 5px;
	font-size:1.5em;
}

ตอนแสดงขึ้นมาครั้งแรก ให้ซ่อน caption ไว้ก่อน

/* ตอนแสดงขึ้นมาครั้งแรก ให้ซ่อน caption ไว้ก่อน*/
.imgteaser a .desc {	display: none; }

โค้ดทั้งหมด จะเป็นดังนี้

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.imgteaser {
	margin: 0;
	overflow: hidden;
	float: left;
	position: relative;
}
.imgteaser a {
	text-decoration: none;
	float: left;
}
/* ถ้าไม่ใส่ cursor: pointer ไป ตอนแสดงใน ie6 caption จะหน่วงนิดนึง*/
.imgteaser a:hover {
	cursor: pointer;
}
/* ตกแต่งภาพให้ดูคล้ายๆ ภาพโพลารอยด์*/
.imgteaser a img {
	float: left;
	margin: 0;
	border: none;
	padding: 10px;
	background: #fff;
	border: 1px solid #ddd;
}
/* เมื่อเอาเมาส์ไปชี้ที่รูปภาพ ให้แสดงตัว caption ขึ้นมา โดยกำหนดความโปร่งแสงไว้ที่ 75%*/
/* ตรงนี้แหละที่เป็นจุดสำคัญ  CSS ตรงนี้จะทำงานก็ต่อเมื่อเอาเมาส์ไปชี้ที่ภาพเท่านั้น  โอ้วเหมือน javascript เลย*/
.imgteaser a:hover .desc {
	display: block;
	font-size: 1.2em;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #fff;
	position: absolute;
	bottom: 11px;
	left: 11px;
	padding: 10px;
	margin: 0;
	width: 566px;
	border-top: 1px solid #999;
}
/* ตัว strong ใน caption กำหนดให้ใหญ่กว่าปกติหน่อย เพื่อความสวยงาม*/
.imgteaser a:hover .desc strong {
	display: block;
	margin-bottom: 5px;
	font-size:1.5em;
}
/* ตอนแสดงขึ้นมาครั้งแรก ให้ซ่อน caption ไว้ก่อน*/
.imgteaser a .desc {
	display: none;
}
</style>
</head>
<body>
<div class="imgteaser"> 
    <a href="#">
    <img src="IMAGE_059.jpg" alt="Itame" />
    <span class="desc">
    <strong>อีติ๋มตายแน่</strong> ตายแน่ๆ ในโรงภาพยนต์ใกล้บ้านท่าน </span>
    </a> 
</div>
</body>
</html>

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> .imgteaser { margin: 0; overflow: hidden; float: left; position: relative; } .imgteaser a { text-decoration: none; float: left; } /* ถ้าไม่ใส่ cursor: pointer ไป ตอนแสดงใน ie6 caption จะหน่วงนิดนึง*/ .imgteaser a:hover { cursor: pointer; } /* ตกแต่งภาพให้ดูคล้ายๆ ภาพโพลารอยด์*/ .imgteaser a img { float: left; margin: 0; border: none; padding: 10px; background: #fff; border: 1px solid #ddd; } /* เมื่อเอาเมาส์ไปชี้ที่รูปภาพ ให้แสดงตัว caption ขึ้นมา โดยกำหนดความโปร่งแสงไว้ที่ 75%*/ /* ตรงนี้แหละที่เป็นจุดสำคัญ CSS ตรงนี้จะทำงานก็ต่อเมื่อเอาเมาส์ไปชี้ที่ภาพเท่านั้น โอ้วเหมือน javascript เลย*/ .imgteaser a:hover .desc { display: block; font-size: 1.2em; padding: 10px 0; background: #111; filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/ color: #fff; position: absolute; bottom: 11px; left: 11px; padding: 10px; margin: 0; width: 566px; border-top: 1px solid #999; } /* ตัว strong ใน caption กำหนดให้ใหญ่กว่าปกติหน่อย เพื่อความสวยงาม*/ .imgteaser a:hover .desc strong { display: block; margin-bottom: 5px; font-size:1.5em; } /* ตอนแสดงขึ้นมาครั้งแรก ให้ซ่อน caption ไว้ก่อน*/ .imgteaser a .desc { display: none; } </style> </head> <body> <div class="imgteaser"> <a href="#"> <img src="IMAGE_059.jpg" alt="Itame" /> <span class="desc"> <strong>อีติ๋มตายแน่</strong> ตายแน่ๆ ในโรงภาพยนต์ใกล้บ้านท่าน </span> </a> </div> </body> </html>

Credit : http://www.sohtanaka.com/web-design/css-on-hover-image-captions/

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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

CSS PHP