เซียน CSS3 สอนรุ่นน้องหน่อยจ้าาา +1

<!doctype html>
<html>
<head>
<style rel="stylesheet" type="text/css">
body{margin:0;padding:0;}
a{text-decoration:none; color:#fff;}
figure{
   position:relative;
   float:left;
   width:200px;
   height:200px;
   margin:5px;
   text-align:center;
   }
figure>img{width:200px;}
figure>figcaption{
   position:absolute;
   width:200px;
   height:50px;
   bottom:0;
   background-color:rgba(25,25,25,0.5); /* ค่า 0.5 คือค่าความโปร่งใสของพื้นหลังข้อความนะครับ ค่า 0 ถึง 1 ลองปรับดูครับ */
   z-index:-1;
   }
figure:hover>figcaption{
   z-index:1;
   }
</style>
</head>
<body>
<a href="http://www.uchord.com" target="brank">
<figure>
<img src="https://lh6.googleusercontent.com/-7MU5IWoXing/UP_K3FioyXI/AAAAAAAAAIs/lEhgpiYKt_Q/s220-no/Profile.jpg"/>
<figcaption>
[url=http://wWw.uChord.cOm]wWw.uChord.cOm[/url]
</figcaption>
</figure>
</a>
<a href="http://www.uchord.com" target="brank">
<figure>
<img src="https://lh6.googleusercontent.com/-7MU5IWoXing/UP_K3FioyXI/AAAAAAAAAIs/lEhgpiYKt_Q/s220-no/Profile.jpg"/>
<figcaption>
[url=http://wWw.uChord.cOm]wWw.uChord.cOm[/url]
</figcaption>
</figure>
</a>
</body>
</html>

อ้างจาก: BakKheab ที่ 26 มิถุนายน 2014, 00:21:01

ภาพด้านขวา เป็นภาพที่ hover นะครับ

Copy Code นี้ไป Save เป็น .html ลองดูนะครับ

โค๊ด:

<!doctype html>
<html>
<head>
<style rel="stylesheet" type="text/css">
	body{margin:0;padding:0;}
	a{text-decoration:none; color:#fff;}
	figure{
                position:relative;
                float:left;
                width:200px;
                height:200px;
                margin:5px;
                text-align:center;
              }
	figure>img{width:200px;}
	figure>figcaption{
                position:absolute;
                width:200px;
                height:50px;
                bottom:0;
                background-color:rgba(25,25,25,0.5); /* ค่า 0.5 คือค่าความโปร่งใสของพื้นหลังข้อความนะครับ ค่า 0 ถึง 1 ลองปรับดูครับ */
                z-index:-1;
              }
	figure:hover>figcaption{
                z-index:1;
              }
</style>
</head>
<body>
<a href="http://www.uchord.com" target="brank">
<figure>
	<img src="https://lh6.googleusercontent.com/-7MU5IWoXing/UP_K3FioyXI/AAAAAAAAAIs/lEhgpiYKt_Q/s220-no/Profile.jpg"/>
	<figcaption>
	[url=http://wWw.uChord.cOm]wWw.uChord.cOm[/url]
	</figcaption>
</figure>
</a>
<a href="http://www.uchord.com" target="brank">
<figure>
	<img src="https://lh6.googleusercontent.com/-7MU5IWoXing/UP_K3FioyXI/AAAAAAAAAIs/lEhgpiYKt_Q/s220-no/Profile.jpg"/>
	<figcaption>
	[url=http://wWw.uChord.cOm]wWw.uChord.cOm[/url]
	</figcaption>
</figure>
</a>
</body>
</html>

ของท่านนี้เขียนเป็น HTML5 ด้วยครับ ได้เหมือนกันครับผม wanwan012