|
View : 1866
หลังจากที่ท่านได้ดู 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>
|
Credit : http://www.sohtanaka.com/web-design/css-on-hover-image-captions/
|
