posted on 15 Feb 2012 18:13 by limitblog in css directory Idea
Picture 1
tetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttestte
Picture 2
tetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttestte
Picture 3
tetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttestte
Picture 4
tetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttestte
Picture 5
tetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttestte
Picture 6
tetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttesttetesttesttestte
สวัสดีวันที่ "15 กุมภาพันธ์ 55"
โอ่่ๆๆ ลืมอัพ blog ช่วงวันแห่งความรัก วันนี้คงยังทัน หุหุ แต่ที่อัพไม่ได้เกี่ยวอะไรกับความรักหรอกครับ เกี่ยวกับ css อีกตามเคย เห็นข้างบนรูป 6 รูปกันแล้วนะครับ เรียกยังไงดี "ลิงค์รูปภาพ" " รูปภาพลิงค์" "แกลลาลี่ลิงค์" "เมนูรูปภาพ" ลิงค์อะไรก็แล้วแต่ครับ -*-...เป็นแบบที่เห็นคือเอาเมาว์ไปวางที่รูปแล้วให้ลิงค์ไปหาในลิงค์นั้นๆที่ชี้ อะไรประมาณนั้นครับ หลักการนั้นแสนง่าย เหมือนการ hover ทั่วๆนะครับ แต่ใส่ transfotm ลงไปให้ดูลิเกมาอีกหน่อย โดย hover ทั้งหมดมันจะรวมอยู่ทีรูปภาพอันเดียว
เหมือนนก tweet entry ที่แล้ว
ดูรูปประกอบโครงสร้างง่ายๆกันครับ
Hover image
ต่อไปนำ css ด้านล่างนำไปวางไว้รวมกับตัว
theme เลยนะครับ
<![CDATA[
<style>
.gall{
width:600px;
list-style:none;
color:#fff;
z-index:2;
position:relative;
}
.gall>li{
list-style:none;
position:relative;
display:inline-block;
margin:10px 10px 10px 15px;
top:0;
-moz-transition:top .5s;
-webkit-transition:top .5s;
}
.gall>li:hover{
top:-10px;
}
.gall>li a:before{
content:'Read more';
position:absolute;
font-size:10px;
color:#000;
background:#fff;
padding:0px 5px;
right:8px;
top:8px;
border-radius:3px;
opacity:0;
}
.gall>li a:hover:before{
opacity:.8;
}
.gall>li img{
max-width:160px;
background:#ccc;
padding:5px;
border:solid 1px #fff;
box-shadow:0 0 4px #666; }
.gall>li span{
background:rgba(255,255,255,.8);
box-shadow: 0 2px 2px #555;
color:#333;
padding:0px 7px 5px 7px;
position:absolute;
margin-top:130px;
text-shadow:1px 1px 1px #fff;
left:100px;
width:180px;
height:60px;
word-wrap:break-word;
word-break:break-all;
font-size:12px;
top:0;
opacity:0;
-moz-transition:left .5s, opacity .5s;
-webkit-transition: left .5s, opacity .5s;
}
.gall>li:hover span{
margin-top:130px;
left:-10px;
opacity:1;
}
.gall>li h3{
background:rgba(255,255,255,.8);
color:#333;
box-shadow: 0 2px 2px #555;
padding:0px 7px 2px 7px;
position:absolute;
top:95px !important;
left:-100px;
opacity:0;
-moz-transition:left .5s, opacity .5s;
-webkit-transition:left .5s, opacity .5s;
}
.gall>li:hover h3{
top:75px;
left:-10px;
opacity:1;
}
/*CSS3 RIBBON*/
/* left shadow */
.gall>li span:before , .gall>li h3:before{
content:"\00a0";
display:block;
position:absolute;
top:65px;
left:0px;
width:0;
height:0;
border-width:10px 0 10px 10px;
border-style:solid;
border-color:#bbb transparent transparent;
z-index:-1;
}
/* right shadow */
.gall>li span:after {
content:"\00a0";
display:block;
position:absolute;
top:65px;
right:1px;
width:0;
height:0;
border-width:10px 10px 10px 0;
border-style:solid;
border-color:#bbb transparent transparent;
z-index:-1;
}
.gall>li h3:before{
top:23px;
left:0px;
}
.bottom{
background:url(http://uc.exteenblog.com/limitblog/images/images/shadow.png);
width:189px;
height:15px;
position:absolute;
left:0;
bottom:0px;
margin:-2px -8px;
z-index:-1;
-moz-transition:bottom .5s ;
-webkit-transition:bottom .5s;
}
.gall>li:hover .bottom{
bottom:-10px;
-moz-transition:bottom .5s;
-webkit-transition:bottom .5s;
}
</style>
]]>
ต่อไปคือ HTML ที่ต้องนำไปวางนะครับ วางใน entry ตามด้านล่างเลยครับ
<![CDATA[
<div class="gall">
<li><a href="#"><img src="#"/></a>
<h3>#</h3>
<span>#</span>
<div class="button"></div>
</li>
<li><a href="#"><img src="#"/></a>
<h3>#</h3>
<span>#</span>
<div class="button"></div>
</li>
<li><a href="#"><img src="#"/></a>
<h3>#</h3>
<span>#</span>
<div class="button"></div>
</li>
</div>
]]>
.
ท้ายนี้ ::ขอขอบคุณ
Fightflyที่ทำให้แมลงวันในรูปหัวใจบินว่อน และ รูปภาพทั้งหลายที่ยืมมาโดยมิได้บอกกล่าว
ปล.ทำ howto ไม่เก่ง ใช้คำอธิบายลำบาก (สำหรับผม) ยังไงติดตามในแบบ demo ต่อไปละกันนะครับ -*-
บ้านนายลิงแว่น
(หัวใจบินว่อนทั่วบล็อก ดูน่ารักดีครับ ฮาา
#1 By Copiic on 2012-02-15 18:36