สร้าง mouse over image caption ด้วย CSS ล้วนๆ

By : admin | Date : 2014-05-22 18:28 | View : 3413

สร้าง mouse over image caption ด้วย CSS ล้วนๆ

หลังจากที่ท่านได้ดู 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/

Tag : สร้าง mouse over image caption ด้วย CSS

แสดงความคิดเห็น