การทำภาพ Mosaic ด้วย Css ให้กับเว็บไซต์

ภาพแบบ Mosaic คือการนำภาพเล็กหลายๆภาพมารวมกันให้เป็นรูปโดยมีภาพพื้นหลังเป็นหลัก วันนี้เราจะมาใช้ HTML,CSS แค่สองอย่าง

ในการทำภาพ Mosaic ในโปรแกรม Graphic ทั่วไปคือการเอาภาพหลัก และ นำภาพย่อยมาวางซ่อนเป็นช่องๆเป็น layer ไป ซึ่งในการใช้ html และ css ทำก็ใช้หลักการเดียวกันครับ

ตัวอย่าง Link

1.  เริ่มจากการสร้าง css class สำหรับรูปหลักรูปใหญ่ ที่เป็นรูปใหญ่เต็มหน้าจอ  .mainbackground

.mainbackground{
    
   position: relative;
   -webkit-background-size: cover; /* For WebKit*/
   -moz-background-size: cover;    /* Mozilla*/
   -o-background-size: cover;      /* Opera*/
   background-size: cover;         /* Generic*/
   background-repeat: no-repeat;
   background-position: center center;
   background-image:url("background.jpg");
   width:100%;
   height:100%;
   position: fixed;
   left:0;
   top:0;
    
    
    }

2 การนำ layer ภาพเล็กๆมาใส่ ด้วย ul list class tile

.tile{ 
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    }
    .tile li{
    
      -webkit-background-size: cover; /* For WebKit*/
      -moz-background-size: cover;    /* Mozilla*/
      -o-background-size: cover;      /* Opera*/
      background-size: cover;         /* Generic*/
      background-repeat: no-repeat;
      background-position: center center;
      list-style: none ;
      width:10%;
      float:left;
      height:150px;
      display:block;
      opacity: .1;
      -webkit-filter: sepia(1);
      filter: sepia(1);
      transition: all .5s ease-in-out; 
      overflow: hidden;
      cursor: pointer;
    }
    
    .tile li:hover{
    
   
     
           transition: all .5s ease-in-out; 
           transform: scale(1.5);
           opacity: 1;
     
    }

และส่วนที่เป็น HTML ของทั้งสองส่วนครับ

<div class="mainbackground"></div>
 
 
 <ul class="tile">
 <li style=" background-image:url('tile/1.jpg')"></li>
 <li style=" background-image:url('tile/2.jpg')"></li>
 <li style=" background-image:url('tile/3.jpg')"></li>
 <li style=" background-image:url('tile/4.jpg')"></li>
 <li style=" background-image:url('tile/5.jpg')"></li>
 <li style=" background-image:url('tile/6.jpg')"></li>
 </ul>

แค่นี้เราก็จะได้ภาพ Mosaic ในเว็บไซต์แล้วครับ

สามารถ Download Source ไปทดลองได้ครับ