• 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 เลยนะครับ
     
    <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 ตามด้านล่างเลยครับ <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 ต่อไปละกันนะครับ -*-

    Comment

    smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry
    smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

    Tweet

    โอ้ว น่าสนใจจริงๆ
    (หัวใจบินว่อนทั่วบล็อก ดูน่ารักดีครับ ฮาา big smile )

    #1 By Copiic on 2012-02-15 18:36

    เทคนิคล้ำเลิศอีกแล้ว confused smile double wink Hot! Hot! Hot! Hot! Hot!

    #2 By บุรุษนิรนาม on 2012-02-16 10:51

    Hot! Hot! Hot!
    เก่งจัง ทำได้ไงอ่ะembarrassed

    #3 By The dark side on 2012-02-16 14:27

    มาเจ๋งอีกแย้ววว >v< หัวใจเต็มไปหมดเลย มึน @v@ 555

    #4 By Kiseki Sora on 2012-03-27 16:07